Вертикально выровнять div (без таблиц) - PullRequest
Новая
       9

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

20 голосов
/ 15 декабря 2009

Я могу выровнять 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>

Запустите приведенный выше фрагмент и нажмите «Полная страница», чтобы увидеть, как он выглядит в настоящее время. По сути, он отлично смотрится по горизонтали, но теперь мне нужно, чтобы он также располагался по центру страницы вертикально.

Элемент, который я хочу выровнять по вертикали, это #container div. Эффект заставит весь div и все sub div не только выровнять по горизонтали, но и по вертикали. Я знаю, что это возможно, и я знаю, что Энди Бадд опубликовал такое решение, но, похоже, оно не работает для меня.

Ответы [ 8 ]

21 голосов
/ 15 декабря 2009

Если у вас нет возможности явно установить высоту вашего контейнера (что, похоже, не так), нет кросс-браузерного решения для вертикального центрирования вашего контейнера 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();

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

8 голосов
/ 15 декабря 2009

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

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

РЕДАКТИРОВАТЬ: я изменил ваш 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 вы должны заранее знать высоту вашего контента , чтобы вы могли применить отрицательное поле в половине этой высоты к плавающему элементу. В примере я выбрал 200px.

увидеть его в действии .

2 голосов
/ 15 декабря 2009

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

Вот SSCCE , просто скопируйте и вставьте. Граница чисто презентационная, остальные стили обязательны. 

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

2 голосов
/ 15 декабря 2009

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

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

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

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

1 голос
/ 30 мая 2012

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

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

0 голосов
/ 22 марта 2017

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

0 голосов
/ 05 марта 2011

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

это пример:

HTML: 

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

CSS: 

.notificationArea
{
    position: absolute;
    top: 50%;
    bottom: 50%;
    right: 50%;
    left: 50%
}
0 голосов
/ 15 декабря 2009

Если высота вашего основного контейнера плавная, ваш единственный надежный выбор - использовать 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...