Web Style Sheets
CSS съвети и трикове

Центриране на обекти

Основна функция на CSS е да центрира текст или изображения. На практика, има три вида центриране:

• Центриране на редове текст
• Центриране на блок от текст или изображение
• Вертикално центриране на блок или изображение

Центриране на редове текст

Най-често срещаният (и затова) най-лесният начин на центриране е на редове от текст в параграф или заглавие. CSS притежава свойството 'text-align' за това:

P { text-align: center }
H2 { text-align: center }

рендира всеки ред от P или в H2 центриран между отстоянията си (margin), като тук:

Центриране на блок или изображение

Понякога не желаем да центрираме текст, а цял блок. Или казано по друг начин: желаем лявото и дясното отстояние (margin) да са равни. Начинът за постигане на това е чрез задаване на margin на 'auto'. Това обикновено се използва за блок с фиксирана ширина, защото самият блог е подвижен, той просто ще заеме цялото свободно пространство на ширина. Ето пример:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">This rather...

Това също е и начин за центриране на изображение: създайте го като блок и задайте свойства за отстояние към него. Например:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Вертикално центриране

CSS level 2 не притежава свойство за вертикално центриране на обекти. Вероятно ще има такова в CSS level 3. Но дори и в CSS2 блокове могат да бъдат центрирани вертикално чрез комбиниране на няколко свойства. Трикът е да се дефинира външния блок като клетка от таблица (table cell), защото съдържанието на клетките на таблици могат да бъдат центрирани вертикално.

Следващият пример центрира параграф, намиращ се в блок с определена височина. Отделен пример показва параграф, който е центриран вертикално в прозореца на браузъра, защото е в блок, позициониран абсолютно и висок колкото самия прозорец.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>