Сделано проектов 80

13 Июль 2008

Начну с того, что этот вопрос делится на 2 вопроса. Во-первых, как выровнить div или любой другой элемент по вертикали в браузере, а, во-вторых, как выровнять что-либо, например, текст в диве. Пойдем по порядку.

Также стоит заметить, что я до сих пор не знаю НИ ОДНОГО нормального способоа вертикально выравнивать дивы, который бы работал без огрехов во ВСЕХ браузерах.

Выравнивание div по центру по вертикали

Есть 2 способа, абсолютный и релевантный. Например, чтобы отцентрировать относительно <body>, у которого ширина-высота 100% и отступы обнулены, пишем:

div#center {
background:#CCC;/* для наглядности */
width:300px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}
<body>
<div id=»center»> наш флэш-ролик, например (другого назначения такому решению не знаю, потому что, когда размер окна браузера становится меньше размера содержимого дива, браузер «съедает» часть содержимого слева и сверху, что для контента или логотипа не есть хорошо!!!)</div>
</body>
</html>

Второй пример отличается от предыдущего вычисляемыми значениями высоты и ширины блока. Понадобится ли это кому-то на практике — не знаю, но без этого статья была бы не полной.

div#Splash { background:#CCC;/* для наглядности */ width:50%; height:50%; position:absolute; top:25%; left:25%; }

На этот раз для позиционирования блока используем лишь координаты его левого верхнего угла. Вычитаем из общей высоты внешнего блока (в начале статьи решили что это будет <body>) высоту центрируемого блока (100% — 50% = 50%), делим ее пополам и получаем top:25%. Также поступаем с шириной и соответственно отступом слева (в примере: left:25%).

Выравнивание текста в диве

Как все знают, во всех нормальных браузерах (не IE!!!) работает это:

div {
height: 200px;
display: table-cell;
vertical-align: middle;
}

Для следующего, к примеру, кода:

<div>
<p>
Текст, который нужно выровнять по центру по вертикали…
</p>
</div>

А вот в IE (как в 5,6, так и в 7-8) начнаются всякие разные извращения. Они либо основаны на релевантных позициях и процентных отступах, либо на java expression. К сожалению, ни те, ни другие способы выравнивания div в IE нельзя назвать идеальными, тем не менее, других альтернатив нет.

Способ 1

div {
height: 200px;
display: table-cell;
vertical-align: middle;
}
div p {
margin-top: expression((parentNode.offsetHeight — this.offsetHeight)<0 ? «0″ : (parentNode.offsetHeight — this.offsetHeight)/2 + «px»)
}

Способ 2

<div style=”display: table; height: 400px; _position: relative; overflow: hidden;”>
<div style=” _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;”>
<p style=” _position: relative; _top: -50%”>
Текст, который нужно выровнять по центру по вертикали…
</p>
</div>
</div>

Способ 3