Перекрестное выравнивание по центру браузера с использованием CSS - PullRequest
25 голосов
/ 29 мая 2010

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

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

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

как и я здесь .

Это хорошее кросс-браузерное решение для горизонтального выравнивания?

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

Ответы [ 4 ]

32 голосов
/ 29 мая 2010

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

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

Это прекрасно совместимо с кроссбраузером.

Вертикальное центрирование возможно только в том случае, если элемент расположен абсолютно и имеет известное значение 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?" опыт.

7 голосов
/ 29 мая 2010

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

Вы можете попытаться использовать 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's height */
        height:300px;
    }
.inline-block {
    display:inline-block;
    *display:inline;/* for IE < 8 */
    *zoom:1;/* for IE < 8 */
}

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

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

Рабочий пример этого можно посмотреть здесь: http://jsfiddle.net/UXKcA/3/

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

2 голосов
/ 03 марта 2014

Проверьте это Демо jsFiddle

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

  1. HTML выравнивание значение атрибута центр

  2. CSS margin-left и margin-right значение свойства установлено 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>
0 голосов
/ 27 сентября 2011

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

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

$(function(){
   $("#content").hide();
)};
$(window).bind("load", function() {
   $("#content").getDimSetMargins();
   $("#content").show();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...