Страница с горизонтально-вертикальной центровкой
Вертикальное центрирование всегда было очень проблематично с помощью CSS, так как свойство vertical-align применимо только для строковых (inline) элементов и не применимо к блочным элементам. Тем не менее вертикальное выравнивание как и в ячейках таблицы возможно, используя для этого 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 с 5 по 7, когда при перемещении элемента вниз на 50% (при условии что блок плавающий — position:relative), и перемещении родительского элемента с отрицательным значением вверх, блок выравнивается вертикально. При использовании данного способа для других браузеров, элемент вернется на тоже место, но в IE блок расположится по центру.
<!--[if lt IE 8]>
<style type="text/css">
#container{top:50%}
#inner{top:-50%;position:relative;}
</style>
<![endif]-->
Кроме того нам необходимо добавить overflow: hidden к внешнему блоку (#outer), иначе у нас появится вертикальная полоса прокрутки, которая нам не нужна.
<!--[if IE 7]>
<style type="text/css">
#outer{
position:relative;
overflow:hidden; }
</style>
<![endif]-->
В CSS ничего изменять не потребуется, так как IE 7 и ниже игнорируют display:table. HTML также останется нетронутым, необходимо лишь добавить 2 (ну на самом деле не две ;) — примечание переводчика) строки CSS-кода, написанных выше. Но еще проще уже некуда.
Страница с использованием приведнного выше кода.
Вертикальное выравнивание элементов без указанной высоты и ширины
Фактически оба вышеуказанных метода настолько успешны, что с небольшими поправками вы можете отцентрировать элементы неизвестной ширины и высоты в отличие от других доступных методов. Вот демонстрационный пример.
Данная статья является переводом. При желании вы всегда можете прочитать эту статью на английском языке.
Комментарии
Отправить комментарий