Кросс-браузерное выравнивание с помощью CSS

Каков самый простой способ выравнивания div, чья позиция relative горизонтально и вертикально с использованием CSS? Ширина и высота div неизвестны, т.е. Он должен работать для каждого измерения div и во всех основных браузерах. Я имею в виду выравнивание по центру.

Я думал создать горизонтальное выравнивание, используя:

margin-left: auto;
margin-right: auto;

как я сделал здесь.

Является ли это хорошим решением для перекрестного браузера для горизонтального выравнивания?

Как я могу выполнить вертикальное выравнивание?

Ответ 1

Горизонтальное центрирование возможно только в том случае, если известен элемент width, иначе браузер не сможет определить, с чего начать и завершить.

#content {
    width: 300px;
    margin: 0 auto;
}

Это идеально совместимо с crossbrowser.

Вертикальное центрирование возможно только в том случае, если элемент расположен абсолютно и имеет известный height. Абсолютное позиционирование, однако, нарушило бы margin: 0 auto;, поэтому вам нужно подойти к этому по-другому. Вам нужно установить top и left на 50% и margin-top и margin-left на отрицательную половину своих width и height соответственно.

Вот пример copy'n'paste'n'runnable:

<!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?" опыт.

Ответ 2

"Вертикальное центрирование возможно только в том случае, если элемент расположен абсолютно и имеет известную высоту". - Это утверждение неверно.

Вы можете попробовать и использовать display:inline-block; и возможность его выравнивания по вертикали в своем родительском поле. Этот метод позволяет выровнять элемент, не зная его высоты и ширины, хотя он требует, чтобы вы, по крайней мере, знали родительскую высоту.

Если ваш HTML это,

<div id="container">
    <div id="aligned-middle" class="inline-block">Middleman</div>
    <div class="strut inline-block">&nbsp;</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 height */
        height:300px;
    }
.inline-block {
    display:inline-block;
    *display:inline;/* for IE < 8 */
    *zoom:1;/* for IE < 8 */
}

Затем # aligned-middle будет центрироваться в #container. Это самое простое использование этой техники, но это хорошо знакомо.

Правила, помеченные символом "/* для IE < 8 */", должны быть помещены в отдельный стилизованный лист с использованием условных комментариев.

Здесь вы можете посмотреть рабочий пример: http://jsfiddle.net/UXKcA/3/

edit: (этот конкретный фрагмент протестирован в ie6 и ff3.6, но я использую это много, это довольно кросс-браузер. Если вам нужна поддержка для ff < 3, вам также необходимо добавить display:-moz-inline-stack; под display:inline-block; внутри правила .inline-block.)

Ответ 3

Отметьте это Demo jsFiddle

Установите следующие две вещи

HTML align значение атрибута центр
CSS margin-left и margin-right значение свойства set auto

CSS

<style type="text/css">
     #setcenter{
          margin-left: auto;
          margin-right: auto;    
          // margin: 0px auto; shorthand property
     }
</style>

HTML

<div align="center" id="setcenter">
   This is some text!
</div>

Ответ 4

"Если ширина и высота действительно неизвестны заранее, тогда вы нужно захватить Javascript/jQuery, чтобы установить margin-left и margin-top ценностей и жить с тем фактом, что клиент будет быстро видеть div сдвигается во время загрузки страницы, что может вызвать" wtf? "опыт".

Вы можете .hide() делить, когда DOM готов, дождитесь загрузки страницы, установите значения div margin-left и margin-top и .show() div снова.

$(function(){
   $("#content").hide();
)};
$(window).bind("load", function() {
   $("#content").getDimSetMargins();
   $("#content").show();
});