Приветствую вас, уважаемые читатели блога DenWeb.Ru. В прошлой статье я писал о выравнивании страницы по центру. Там речь шла о том, как выравнивать блоки по горизонтали. Сегодня же я хочу рассказать о вертикальном выравнивании блока div. Рассмотрим два случая. В первом блок у нас имеет фиксированную ширину, а во втором он резиновый.
Вертикальное выравнивание блока div с фиксированными размерами.
Если блок имеет фиксированную ширину, то здесь все просто. Используем следующий код:
HTML:
<html>
<body>
<div id="centered">Здесь будет содержимое блока </div>
</body>
</html>
CSS:
html {
margin:0;
padding:0;
width:100%;
height:100%;
}
body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#centered {
background:#CCC;
width:600px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
}
Сначала мы обнуляем внешние и внутренние отступы и фиксируем высоту и ширину body и html. Затем для наглядности даем фон блоку centered, так же определяем ему ширину и высоту (600px на 400px). Задаем position:absolute и сдвигаем левый верхний угол блока на 50% вниз и на 50% вправо. Далее важное свойство — отрицательный отступ сверху, равный половине высоты блока и слева, равный половине ширины блока.
Вертикальное выравнивание резинового блока div.
HTML :
<html>
<head>
<!--[if gte IE 6]>
<style>
#container {
margin-top: expression( this . parentNode . offsetHeight > this . offsetHeight ?(( this . parentNode . offsetHeight-this . offsetHeight ) / 2 + "px" ) : "0" );
}
</style>
<![endif]-->
</head>
<body>
<div id="centered">Здесь будет содержимое блока
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
#centered {
background:#CCC;
}
Отдельно для html добавляем display: table; определяющее, что элемент является блочной таблицей. Далее прописываем для body свойства, указывающие что элемент представляет собой ячейку таблицы с вертикальным выравниванием по-середине.
Но как обычно проблемы возникают с браузером IE, который не умеет работать со свойством display: table-cell . Именно для него используются условные комментарии , благодаря чему для IE версии 6 и позднее задаются свои стили для блока #centered.