Выравнивание сайта по центру страницы
Как выровнять сайт по горизонтали знает каждый, а те у кого появилась необходимость выровнять сайт по вертикали относительно всей страницы, т. е. сделать его по центру экрана, наверняка, столкнулись с проблемой отображения информации в разных браузерах.
Уверен, даже, что проблема отображения появилась в одном единственном «всеми любимом» браузере — Internet Explorer. Ох уж этот IE, вечно не дает покоя :)
Решение данной незадачи не такое уж и сложное. Ниже приведен пример выравнивания текста как по горизонтали так и по вертикали относительно страницы:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="windows-1251">
<title>Выравнивание сайта по центру страницы</title>
<style>
html, body {
height: 100%;
width: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
text-align:center;
}
#container {
margin: 0 auto;
text-align: center;
}
</style>
<!--[if gt 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="container">
Этот текст выровнен по центру относительно всей страницы
</div>
</body>
</html>
Теперь обо всем по порядку.
Для html и body переданы свойства ширины и высоты с параметрами 100% для того чтобы охватить всю область страницы.
Отдельно для html добавляем display: table; говорящий, что див является таблицей подобно использованию тега
, плюс прописываем для body свойства, указывающие что элемент представляет собой ячейку таблицы с вертикальным и горизонтальным выравниванием по середине.
Далее идет элемент container с позиционированием по середине.
А теперь важная часть! Пишем хак для браузера IE между условными комментариями и которые как бы говорят браузеру: «Дружище, ты, верно, браузер IE, еще и позднее 6-й версии, будь добр, загрузи стили!» :) И он покорно слушается и загружает стиль со свойством margin-top, параметром которого является expression — специальная конструкция, благодаря которой полноценные javascript—выражения можно писать прямо в CSS—файле.
Комментарии:
Нету комментариев для вывода...