Перекрестное выравнивание по центру отделения браузера с помощью CSS
Что самый легкий путь состоит в том, чтобы выровнять a div чье положение relative горизонтально и вертикально с помощью CSS? Ширина и высота div неизвестно, т.е. это должно работать на каждый div размер и во всех главных браузерах. Я имею в виду выравнивание по центру.
Я думавший сделать использование выравнивания по горизонтали:
margin-left: auto;
margin-right: auto;
как я сделал здесь.
Действительно ли это - хорошее перекрестное решение для браузера для выравнивания по горизонтали?
Как я мог сделать выравнивание по вертикали?
2 ответа
Горизонтальное центрирование возможно, только если известна ширина элемента, иначе браузер не сможет понять, где начать и где закончить.
#content {
width: 300px;
margin: 0 auto;
}
Это вполне совместимо с кроссбраузерностью.
Вертикальное центрирование возможно, только если элемент позиционирован абсолютно и имеет известную высоту. Однако абсолютное позиционирование нарушит margin: 0 auto;, поэтому вам нужно подойти к этому по-другому. Вам нужно установить top и left на 50% и margin-top и margin-left на отрицательную половину его width и height соответственно.
Вот пример для копирования и вставки:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2935404</title>
</head>
<style>
#content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 1px solid #000;
}
</style>
<body>
<div id="content">
content
</div>
</body>
</html>
Однако в реальном мире вертикальное центрирование обычно применяется редко.
Если ширина и высота действительно неизвестны заранее, то вам придется воспользоваться Javascript/jQuery для установки значений margin-left и margin-top и смириться с тем, что клиент увидит, как div быстро смещается во время загрузки страницы, что может вызвать ощущение "wtf?".
"Вертикальное центрирование возможно, только если элемент позиционирован абсолютно и имеет известную высоту." - Это утверждение не совсем верно.
Вы можете попробовать использовать display:inline-block; и его возможность быть выровненным по вертикали в пределах родительского блока. Эта техника позволяет выравнивать элемент, не зная его высоты и ширины, хотя для этого необходимо знать, как минимум, высоту родителя.
Если ваш HTML выглядит так;
<div id="container">
<div id="aligned-middle" class="inline-block">Middleman</div>
<div class="strut inline-block"> </div>
</div>
А ваш CSS так:
#container {
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
}
#aligned-middle {
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
}
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut {
/* parent's height */
height:300px;
}
.inline-block {
display:inline-block;
*display:inline;/* for IE < 8 */
*zoom:1;/* for IE < 8 */
}
Тогда #aligned-middle будет выровнен по центру в пределах #container. Это самый простой вариант использования данной техники, но с ним полезно ознакомиться.
Правила, помеченные "/* for IE < 8 */", должны быть помещены в отдельную таблицу стилей, с помощью условных комментариев.
Вы можете посмотреть рабочий пример этого здесь: http://jsfiddle.net/UXKcA/3/
edit: (этот конкретный сниппет тестировался в ie6 и ff3.6, но я часто использую его, он довольно кроссбраузерный. если вам нужна поддержка ff < 3, вам также нужно добавить display:-moz-inline-stack; под display:inline-block; внутри правила .inline-block)