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

(Ця сторінка використовує каскадні таблиці стилів CSS)

Цей документ є перекладом статті з сайту W3C.
Оригінальна версія документу знаходиться тільки на сайті W3C https://www.w3.org/Style/Examples/007/center.html
Цей переклад НЕ є офіційним документом W3C.
Всі Авторські Права Належать W3C.
Цей документ може містить помилки перекладу та похибки.
Автор: Скрипець Євген, засновник SpeedLab (всі переклади автора: en, ru, uk )
Локальна копія: https://www.indeep76.com/Style/Example007ukr/center.html

Лінії

Блоки

Вертикальні

Демо

Центрування

Загальна функція CSS - центрування тексту або зображення. Фактично, існує три види центрування:

Центрування ліній тексту

Найзагальніший й (тому) найпростіший тип центрування - тип центрування ліній тексту в параграфі або змісті. Для цього CSS має властивість 'text-align':

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

перекладає кожну лінію у P або H2, центрованих між його полями, ось так:

Лінії цього параграфу всі центровані між полями параграфу завдяки значенню 'center' властивості CSS 'text-align'.

Центрування блоків або зображень

Иноді центрувати потрібно не текст, а блоки вцілому. Або, по-іншому кажучі: ми бажаємо, щоб праве та ліве поля були однакові. Для цього потрібно встановити поля на '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="...">

Наступне зображення центроване: some random image

Вертикальне центрування

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>

Цей маленький параграф центрований вертикально.

CSS Valid CSS!Valid HTML 4.0!