Общей задачей CSS является центрирование текста или изображений по вертикали. Хотя CSS2 не поддерживает вертикальное выравнивание, где есть вариант, чтоб центрировать блоки по вертикали, комбинируя несколько свойств. Все основа заключена в том, чтобы указать, что внешний блок изначально должен быть отформатирован как ячейка таблицы, потому что содержимое ячейки таблицы может быть отцентрировано по вертикали.
CSS
Код
div.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
div {
Начинающему вебмастеру
}
Более универсальный подход
Это еще один способ выравнивания текста по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но для него все еще требуется контейнер фиксированной высоты:
Код
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
div{
Начинающему вебмастеру
}
CSS просто изменяет размер div, выравнивая по центру по вертикали промежуток, устанавливая высоту строки div, равную его высоте, и делает промежуток встроенным блоком с vertical-align: middle. Затем он устанавливает высоту строки обратно на нормальный для диапазона, поэтому его содержимое будет течь естественным образом внутри блока.
Демонстрация
