Вертикальное выравнивание div (без таблиц) - программирование
Подтвердить что ты не робот

Вертикальное выравнивание div (без таблиц)

Я могу горизонтально выровнять div, и все содержимое выглядит красиво. Глядя на вертикальное выравнивание div, который не содержит никаких таблиц. Я попытался установить позиции маржи на некоторые отрицательные значения внутри #container но это сработало. Я знаю, что CSS еще не поддерживает это?

Вот моя разметка:

body
{
    background: #777; /* gray */
    text-align: center;
}

#container 
{ 
    margin: 0 auto;
    width: 968px;
    text-align: left;
}

#toptab
{
    background: #f77; /* red */
    height: 14px;
    width: 968px;
}

#middletab
{
    background: #7f7; /* green */
    width: 968px;
}

#data
{
    width: 948px; /* 948 for the box plus we need 20 more px to handle the padding */
    padding-left: 10px; 
    padding-right 10px;
}

#bottomtab
{
    background: #77f; /* blue */
    height: 14px;
    width: 968px;
}
<div id="container">
    <div id="toptab"></div>
    <div id="middletab">
        <div id="data">
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
        </div>
    </div>
    <div id="bottomtab"></div>
</div>
4b9b3361

ОТВЕТЫ

Ответ 1

Если у вас есть возможность явно установить высоту вашего контейнера (что не похоже на это в случае), для вертикального центрирования контейнера DIV существует без кроссбраузерного решения.

Использование таблицы полностью жизнеспособно, но вы заметили, что это невозможно использовать.

Если javascript является вариантом, мы можем легко исправить это для вас. Плагин jQuery уже существует для вертикального выравнивания контейнера.

(function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = (ph - ah) / 2;
            $(this).css('margin-top', mh);
        });
    };
})(jQuery);

И вы бы вертикально выровняли блок DIV следующим образом:

$('#example').vAlign();

Взято из Простой вертикальный выравнивающий плагин.

Ответ 2

Посмотрите Вертикальное центрирование с помощью CSS или Вертикально центральное содержимое с CSS или Вертикальное центрирование CSS. Метод 3 первой ссылки такой же, как вертикальный центр CSS с использованием float и clear.

И, конечно, неплохо проверить результат с помощью службы, например browsershots.org

EDIT: я изменил ваш CSS и разметку для реализации метода 3:

CSS

* {
  margin:0;
  padding:0;
}

html,
body {
  height: 100%;
}

body {
  text-align:center;
}

#floater {
  float: left;
  height:50%;
  margin-bottom: -100px;
}

#container
{
  clear:both;
  position: relative;
  margin: 0 auto;
  width:968px;
  text-align: left;
  height: 200px;
}

...

Разметка:

<body>
<div id="floater"></div>
<div id="container">

...

Недостатком, который я вижу в этом методе, является то, что с CSS вам нужно заранее знать высоту вашего контента, чтобы вы могли применить отрицательный запас в половину этой высоты к floater. В примере я выбрал 200px.

Посмотрите на действие.

Ответ 3

Есть несколько способов сделать это, все с компромиссом.

  • Используйте position:absolute, фиксированную высоту и overflow:auto.
  • Используйте display:table, display:table-cell и vertical-align:middle
  • Использовать javascript

Я думаю, что вариант № 2 довольно хорош.

edit: Я не думаю, что вариант 2 будет работать в IE. Вы можете зависеть от javascript, если хотите сохранить динамическую высоту.

Ответ 4

С чистым CSS это возможно только, если div имеет фиксированный height. Вы можете затем position it absolute и установите его top и left на 50% и margin-top и margin-left на отрицательную половину своих width и height соответственно.

Здесь SSCCE, просто скопируйте'paste'n'run. Граница является чисто презентационной, остальные стили необходимы.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 1909753</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 и жить с тем фактом, что клиент увидит, что div быстро перемещается в середину во время загрузки страницы, что может вызвать "wtf?". опыт.

Ответ 5

Создайте контейнер div со стилем display: table и используйте стиль vertical-align: top для внутренних элементов display: inline-block

Рабочая демонстрация на http://jsfiddle.net/uzcrt/

Ответ 6

Если ваша основная высота контейнера является текучей, ваш единственный надежный выбор - использовать JavaScript (конечно, дискуссионный вопрос здесь, конечно, дискуссионный). В JavaScript вы должны сначала найти высоту контейнера, затем высоту окна и соответственно отрегулировать верхнее смещение. Вот как вы это сделаете в jQuery:

$(function() {
    $(window).resize(function() {
        var top = $(window).height() / 2 - $('#content').height() / 2;
        top = top < 0 ? 0 : top;
        $('#content').css('top', top);
    });
    $(window).resize();
});

И CSS, чтобы заставить его работать:

#content {
    position: absolute;
    /* Everything else is optional: */
    width: 960px;
    margin: 0 auto;
}

И HTML:

...
<body>
    <div id="#content">Content here</div>
</body>
</html>

Это все еще довольно просто и будет работать, если у пользователя включен JavaScript.

Ответ 7

Я думаю, что это можно сделать без display: table.

это пример:

HTML:

<div class="notificationArea">
    something
</div>

CSS

.notificationArea
{
    position: absolute;
    top: 50%;
    bottom: 50%;
    right: 50%;
    left: 50%
}

Ответ 8

CSS-класс для выравнивания элемента в середине экрана:

.middle{
    position: absolute;
    top: 50%; /*50% from top*/
    left: 50%; /*50% from left*/ 

    /*remove 50% of element width and height to align the element center in the position*/
    transform: translateY(-50%) translateX(-50%); 
}

Теперь добавьте этот класс в элемент HTML