CSS Вертикальное центрирование - совсем несложно

28.03.2011

В CSS уровня 2 вам не найти свойства вертикального центрирования. Что же делать.
Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Трюк состоит в том, чтобы определить, что наружный блок должен форматироваться, как ячейка таблицы, потому как содержимое ячейки должно центрироваться вертикально.

Пример ниже показывает блочный элемент в котором лежит параграф, естественно блочный элемент мы заменяет на ячейку таблицы, и задает центрирование по вертикали(middle) - display: table-cell;vertical-align: middle;

*div class="container"
style="height: 300px;
width:500px;
margin:0 auto;
display: table-cell;
vertical-align: middle;
border:1px dashed #999;
text-align:center;">
*p>Вот маленький параграф который центрируется по вертикали</p*
</div*


Вот маленький параграф который центрируется по вертикали в блоке с рамкой. А еще ниже Бонус.


1070020

Бонус от меня: - приятная музыка

Последнее в нашем блоге