WEB-нотатки - записник он-лайн

Вирівнювання div за допомогою html і css.

Вертикальне вирівнювання однорядковий елементів - аналог vertical-align: middle
Часто буває таке, що потрібно вирівняти вертикально по центру один рядок тексту в блоці фіксованої висоти. Для цього досить просто задати висоту рядка рівній висоті блоку:

<div style="height: 44px; line-height: 44px;">
Текст, вирівняти по центру вертикально.
</div>

Горизонтальне вирівнювання div

Для цього існує чудовий трюк:

<div style="width: 444px; margin: 0px auto;">
Див, вирівняти по центру горизонтально.
</div>

Правда, є в способу й недоліки. По-перше, потрібно вказувати ширину блоку в пікселях або відсотках, а по друге - трюк не завжди працює в ie, залежно від доктайпа.

Вертикальне і горизонтальне вирівнювання div одночасно

Зараз мова піде саме про вирівнювання самого блоку щодо батьківського, а не про центрування тексту. Отже, якщо дочірній елемент має фіксовану ширину і висоту, його буде досить просто розмістити прямо в середині батьківського блоку наступним чином:

<div> <! - Це батьківський блок довільних розмірів ->
<div style="width: 444px; height: 222px; position: relative; left: 50%; top: 50%; margin-left: -222px; margin-top: -111px;"> <! - А це дочірній блок, який ми вирівнюємо ->
Див, вирівняти по центру батьківського горизонтально і вертикально одночасно.
</div>
</div>

Використовуючи цей метод, значення margin-left і margin-top потрібно задати рівними половині значень width і height відповідно.

Майже як справжній vertical-align в ie:)

Отже, якщо жоден з вищеописаних методів центрування по вертикалі вам не підійшов, то цей спосіб для вас. Працює він точно так само як і справжній vertical align.
HTML:

<div class="container"> <! - блок-контейнер ->
<div> <! - блок зі змістом ->
Елемент, який вирівнюється вертикально всередині блоку-контейнера.
</ div>

<div class="auxiliary"> </ div> <! - пустий допоміжний блок ->
</ div>

CSS:

. container (
display: table-cell;
vertical-align: middle;
height: 444px; width: 333px; border: 1px solid red; / * просто щоб було видно;) * /
)
* + html. auxiliary (
display: inline-block;
vertical-align: middle;
width: 0px;
height: 100%;
)
* + html. container div (
display: inline-block;
vertical-align: middle;
)
* + html. container div,. auxiliary (
display: inline;
)