Вертикально выровняйте отделение (никакие таблицы)
Я могу горизонтально выровнять отделение, и все содержание выглядит хорошим. Смотрение вертикальный выравнивает отделение, которое не содержит таблиц. Я пытался установить граничные положения на некоторые отрицательные величины в #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 отделением. Эффект вынудил бы все отделение и все sub отделения к не только быть горизонтально выровненный, но также и вертикально. Я знаю, что это возможно, и я знаю, что Andy Budd отправил такое решение, но это, кажется, не работает на меня.
5 ответов
Если у вас нет возможности явно указать высоту вашего контейнера (что не похоже на это), не существует кроссбраузерного решения для вертикального центрирования вашего 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();
Взято из Плагина простого вертикального выравнивания .
Взгляните на Вертикальное центрирование с помощью 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 вы должны заранее знать высоту вашего контента , чтобы вы могли применить к плавающему элементу отрицательный запас, равный половине этой высоты. В примере я выбрал 200 пикселей .
Есть несколько способов сделать это, все с компромиссами.
- Используйте положение
: абсолютное, фиксированную высоту ипереполнение: авто]. - Используйте
display: table,display: table-cellиvertical-align: middle - Используйте javascript
Я думаю, вариант № 2 довольно хорошо.
редактировать: Я не думаю, что вариант 2 будет работать в IE. Вы можете застрять в javascript, если хотите сохранить динамическую высоту.
В чистом CSS это возможно только , если div имеет фиксированную высоту . Затем вы можете разместить его абсолютное и установить его верхний и левый на 50% и margin-top и margin-left до отрицательной половины его ширины и высоты соответственно.
Вот 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?" опыт.
Если высота вашего основного контейнера непостоянна, единственный надежный выбор - использовать 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.