Каскадные таблицы стилей
CSS советы & приемы

Центрирование

Общая функция CSS - центрирование текста или изображения. Фактически, существует три вида центрирования:

• Центрирование линий текста
• Центрирование блоков текста или изображения
• Центрирование блоков или изображений вертикально

Центрирование линий текста

Наиболее общий и (поэтому) самый легкий тип центрирования - тип центрирования линий текста в параграфе или оглавлении. Для этого CSS обладает свойством 'text-align':

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

переводит каждую линию в P или H2, центрированных между его полями, вот так:

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

Иногда центрировать нужно не текст, а блоки в целом. Или, по-другому говоря: мы хотим, что правое и левое поля были одинаковы. Для этого нужно установить поля на '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 уровня  2 не обладает свойством вертикального центрирования. Возможно, оно появится в версии CSS уровня  3. Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Трюк состоит в том, чтобы определить, что наружный блок должен форматироваться, как ячейка таблицы, потому как содержимое ячейки can должно центрироваться вертикально.

Пример, приведенный ниже, центрирует параграф внутри блока, который имеет определенную заданную высоту. Отдельный пример показывает параграф, который центрирован вертикально в окне браузера, потому что находится внутри блока, расположенного абсолютно и по высоте окна.

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