1 Тема від Ярослав

  • Ярослав
  • Гість

Тема: [CSS] Як вирівняти текст по вертикально посередині?

Тільки но розпочав розбирати css і натикнувся на те що не можу вирівняти текст вертикально по центру:

#header{
 width: 800px;
 height: 200px;
 text-align: center;
}

2 Відповідь від User 298

  • User 298
  • Гість

Re: [CSS] Як вирівняти текст по вертикально посередині?

vertical-align: middle;

Більше тут.

3 Відповідь від Ярослав

  • Ярослав
  • Гість

Re: [CSS] Як вирівняти текст по вертикально посередині?

Я уже там був і спробував так - не виходить.

4 Відповідь від Ярослав

  • Ярослав
  • Гість

Re: [CSS] Як вирівняти текст по вертикально посередині?

html

 <div id="container">
     <div id="header">HEADER</div>
 </div>

css

#container {
 width: 800px; /* Width */
 height: 600px;
 margin: 0 auto; /* Center align */
}
#header{
 width: 800px;
 height: 200px;
 text-align: center;
}

5 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2106

Re: [CSS] Як вирівняти текст по вертикально посередині?

Про vertical-align. Тобто лише для елементів, які є inline, всередині inline елементу:

The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

Приклад використання vertical-align:

<div id="container">
     <div id="header">
     <span>HEADER1</span>
     <span>HEADER2<br>HEADER3</span>
     </div>
 </div>

#header span {
    display: inline-block;
    vertical-align: middle;
}

Що власне роботи з текстом. Моя порада просто використовувати padding та margin для отримання необхідного змісту.

В специфікації також сказано, що:

Note. Values of this property have different meanings in the context of tables. Please consult the section on table height algorithms for details.

Тобто ще можна виконати такий прийом:

<div style="width: 800px; height: 200px; display: table-cell; vertical-align: middle; text-align: center">test</div>

Проте в деяких браузерах не працює, зокрема IE6. Хоча зараз більшість почала саме так робити.

Можно просто в таблицю засунути, але це не дуже гарно. Раніше так робили.

Ось тут приклад того як вирівняти по центру блок за допомогою абсолютного позиціювання:
http://botta-design.ru/

Ще раз повторюсь. Зазвичай нормальні люди просто використовуються padding та margin, оскільки по вертикалі дуже рідко щось динамічне потрібно вирівнювати.

Подякували: Faraon3

Replace вебсайт