it-swarm.com.ru

CSS: выровнять div по вертикали, когда фиксированный размер div не известен

Как выровнять <div>, который содержит изображение (или flash) вертикально с CSS. Высота и ширина являются динамическими.

45
Oleg Tarasenko

Это чистое решение CSS2 для горизонтального и вертикального центрирования без известных размеров ни контейнера, ни дочернего элемента. Хаки не участвуют. Я обнаружил это для этот ответ и я также продемонстрировал это в этот ответ .

Решение основано на vertical-align: middle в сочетании с line-height: 0, родительский элемент которого имеет фиксированную высоту строки.

HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="" />
    </span>
</span>

И CSS:

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

Протестировано на Win7 в IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.

Единственное предостережение - это IE7, для которого два самых внутренних элемента должны быть объявлены в одной строке, как показано в этой скрипке :

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

Обратите внимание, что промежутки также необходимы для IE7. В любом другом браузере span может быть div.

45
NGLN

Вы можете сделать это с помощью встроенных блоков, один с height: 100% (и одинаковыми высотами для HTML и BODY) и vertical-align: middle.

Пример 1: http://jsfiddle.net/kizu/TQX9b/ (много контента, поэтому его полная ширина)

Пример 2: http://jsfiddle.net/kizu/TQX9b/2/ (изображение любого размера)

В этом примере я использую spans, поэтому он будет работать в IE без хаков, если вы хотите использовать divs, не забудьте добавить в условные комментарии для IE .helper, .content { display: inline; zoom: 1; }, поэтому встроенные блоки будет работать для элементов блока.

12
kizu

В дополнение к другим ответам, приведенным здесь, модель гибкого бокса CSS3 , помимо прочего, позволит вам достичь этого.

Вам нужен только один элемент контейнера. Все внутри будет разложено по правилам гибкой коробочной модели.

<div class="container">
    <img src="/logo.png"/>
</div>

CSS довольно прост, на самом деле:

.container { 
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Я пропустил правила с префиксом поставщика для краткости.

Вот демонстрация, в которой img всегда находится в центре страницы: http://jsfiddle.net/zn8bm/

Обратите внимание, что Flexbox является новой спецификацией и в настоящее время реализована только в Safari, Chrome и Firefox 4+.

8
Chris

Я бы порекомендовал это решение от Бруно: http://www.brunildo.org/test/img_center.html

Тем не менее, я столкнулся с проблемой с его решением w/r/t webkit. Похоже, что webkit рендерил небольшой пробел в верхней части div, если пустому span было разрешено находиться там. Таким образом, для моего решения я добавляю пустой интервал, только если обнаружу, что браузер IE (если кто-то выяснит, как избавиться от этого места, дайте мне знать!) Итак, мое решение в итоге будет:


HTML:

<div class="outerdiv">
    <img src="..." /> 
</div>

CSS:

.outerdiv {
    display: table-cell;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
}
.ie_vertical_align * {
    vertical-align: middle;
}
.ie_vertical_align span {
    display: inline-block;
    height: 150px;
    width: 0;
}

И если я определяю браузер как IE, я добавляю пустой элемент span перед тегом img и стиль css, чтобы он выглядел следующим образом:

<div class="outerdiv ie_vertical_align">
    <span></span>
    <img src="..." /> 
</div>

Вот JSFiddle с этим кодом.

4
rcl

Душан Яновский, чешский веб-разработчик, опубликовал кросс-браузерное решение для этого некоторое время назад. Читать http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

2
duri

Если вас не интересует IE7 и ниже, вам не нужно использовать несколько вложенных div. Если у вас есть div, который вы хотите выровнять по вертикали, этот div находится внутри некоторого контейнера (даже если контейнер является вашим <body>). Следовательно, вы можете указать display: table-cell и vertical-align: middle на контейнере, и тогда ваш div будет центрирован вертикально.

Однако, если вы заботитесь о IE7 и ниже, вам понадобится дополнительный контейнер, чтобы он работал (да, через взлом).

Взгляните на эту скрипку . Он правильно отображается в IE6-9 и других основных браузерах. #container2 присутствует только для IE7 и ниже, поэтому, если вы не заботитесь о них, вы можете удалить его, а также специфические для IE условные стили.

1
Artyom

попробуйте трюк с отступом 50%: 

<html>

<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line; 
     text-align:center; vertical-align:bottom; 
     padding: 50% 0 50% 0">test</div>
</body>

</html>
0
RetroCoder

Установите изображение в качестве фона div и выровняйте его по центру

0
Benjamin Udink ten Cate