Български превод на "Centering things"

Настоящият документ е превод на статията "Centering things".

Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/Style/Examples/007/center.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.

Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 25.08.2008. Последна актуализация на 17.12.2008.

Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.

Документът е преведен със съдействието на АБА уеб дизайн, Balkans и Велина Янкова.

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

(Тази страница използва CSS style sheets)

Редове

Блокове

Вертикално

Пример

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

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

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

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

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

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

Всички редове в този параграф са центрирани между отстоянията на параграфа, благодарение на стойността 'center' на CSS свойството 'text-align'.

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

Понякога не желаем да центрираме текст, а цял блок. Или казано по друг начин: желаем лявото и дясното отстояние (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>

Този малък параграф е центриран вертикално.

CSS Валиден CSS!Валиден HTML 4.0!

Bert Bos
създадено на 5 May 2001;
последна промяна $Date: 2008/07/07 15:03:47 $ GMT