FoxWeb
софт для студентовСтраница с горизонтально-вертикальной центровкой
| Раздел: Интернет, веб-технологии | Автор: Nuxx |
| E-mail: |
Www: http://cssgrakhov.net.ru |
| Просмотров: 2335 | Дата: 06.06.2007 |
Вертикальное центрирование в CSS всегда было очень проблематично для любых элементов. Тем не менее вертикальное выравнивание возможно как и в ячейках таблицы, используя при этом display:table для таких браузеров как Mozilla и Opera.
С помощью условных комментариев (conditional comments) можно написать отдельные правила для IE версий с 5 по 7 (седьмая версия также не понимает display:table и dislay:table-cell — примеч. переводчика), чтобы обеспечить их особое вертикальное выравнивание.
Вот пример страницы с горизонтально-вертикальным центрированием.
Во-первых, я описал все стили, необходимые для браузеров, ведущих себя подобно Mozill'e. Ниже приведен основной CSS-код:
* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
background-color: #cccccc;
text-align:center;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}
#outer {
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}
#inner {
width: 552px;
background:red;
height: 468px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
}
HTML-код выглядит так:
<body>
<div id="outer">
<div id="container">
<div id="inner">
<h1>Centered Vertical and Horizontal</h1>
</div>
</div>
</div>
</body>
Большая часть написанного выше вероятно вам знакома, но основной интерес для нас представляет свойство display:table в элементе #outer. Указание этого свойства заставляет браузер показывать данный элемент как если бы он был таблицей, что позволяет нам использовать вертикальное выравнивание — vertical-align:middle. Затем, используя вложенный блок #container, применяем к нему свойство display:table-cell, тем самым этот элемент будет вертикально выровнен относительно родительского элемента, как если бы он был ячейкой таблицы.
Внутренний элемент #inner, вложенный в элемент #container — горизонтально выравнивается с помощью margin:auto. В результате мы получили полноценный способ горизонтально-вертикального центрирования для таких браузеров как Opera и Mozilla. При использовании обертывающих блоков, наш код выглядит не слишком красиво, но это весьма надежный способ отцентровать контент одновременно и по вертикали, и по горизонтали. В отличие от других способов, где центрируемый элемент сначала перемещается с помощью свойства top вниз на 50%, а затем с помощью отрицательного значения, равного половине высоты элемента, родительский элемент перемещается вверх и в определенный момент уходит за зону видимости, а способ, описанный выше очень прост и надежен.
Чтобы всё так же работало и в IE (опять этот злобный ИЕ отличился :) — примеч. переводчика), нам необходимо видоизменить CSS-код, поскольку IE не понимает display:table. К счастью мы можем воспользоваться особенностью, присущей только IE, когда при перемещении элемента вниз на 50% (при условии что блок плавающий — position:relative), и перемещении родительского элемента с отрицательным значением вверх, блок выравнивается вертикально. При использовании данного способа для других браузеров, элемент вернется на тоже место, но в IE блок расположится по центру.
<!--[if IE ]>
<style type="text/css">
#container{top:50%}
#inner{top:-50%;position:relative;}
</style>
<![endif]-->
В CSS ничего изменять не потребуется, так как IE игнорирует display:table. HTML также останется нетронутым, необходимо лишь добавить 2 строки CSS-кода, написанных выше.
Страница с использованием приведнного выше кода.
Вертикальное выравнивание элементов без указанной высоты и ширины
Фактически оба вышеуказанных метода настолько успешны, что с небольшими поправками вы можете отцентрировать элементы неизвестной ширины и высоты в отличие от других доступных методов. Вот демонстрационный пример.
Данная статья является переводом. При желании вы всегда можете прочитать эту статью на английском языке.
Комментарии
- Виталий 01.09.2007 10:28:47 #
- Супер! Толковая статья.
- Антон 06.09.2007 13:07:31 #
- Надеюсь, что после этой статьи сторонников табличной верстки станет меньше!
Сам не раз использовал подобный прием и советую всем! - Андрей 24.07.2008 15:41:36 #
- Спасибо, помогло, достаточно времени потратил, пока нашел этот вариант.
Оставить комментарий
Заметки по этой теме
- Центровка элементов в CSS, не имеющих постоянной ширины 08.06.2007, 1906
- FAQ по веб-дизайну для начинающих 20.08.2005, 6900
- Как создать сайт? Советы для новичков 10.08.2005, 2648
- Советы по созданию и раскрутке сайта 10.08.2005, 2133
- Как возникла всемирная паутина и Интернет сегодня 05.08.2005, 2446
- Мыльная история или все, что вы хотели знать об e-mail 05.08.2005, 2014
- О методах авторизации пользователей 04.08.2005, 8802
- Настраиваем Apache - FAQ по Apache 04.08.2005, 5798
- Не Apacheм единым жив сисадмин 02.08.2005, 2438
- Юзабилити главной страницы 01.08.2005, 2116