Каскадні таблиці стилів
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>