Как выравнивать <div>, который содержит изображение (или flash) вертикально с помощью CSS. Высота и ширина динамические.
CSS: вертикально выровнять div, если не известен фиксированный размер div
Ответ 1
Это чистое решение 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.
Ответ 2
Вы можете сделать это, используя встроенные блоки, один с height: 100% (и теми же высотами для HTML и BODY) и vertical-align: middle.
Пример 1: http://jsfiddle.net/kizu/TQX9b/ (много контента, поэтому его полная ширина)
Пример 2: http://jsfiddle.net/kizu/TQX9b/2/ (изображение любого размера)
В этом примере я использую span s, поэтому он будет работать в IE без хаков, если вы хотите использовать div s, не забудьте добавить в условные комментарии для IE .helper, .content { display: inline; zoom: 1; }, поэтому встроенные блоки будут работать для блоков.
Ответ 3
В дополнение к другим ответам здесь, 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 +.
Ответ 4
Я бы рекомендовал это решение от Bruno: http://www.brunildo.org/test/img_center.html
Однако я столкнулся с проблемой w/его решением 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 с этим кодом.
Ответ 5
Dušan Janovský, чешский веб-разработчик, опубликовал кросс-браузерное решение для этого некоторое время назад. Прочитайте http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Ответ 6
Если вам неинтересно IE7 и ниже, вам не нужно использовать несколько вложенных div. Если у вас есть div, который вы хотите выровнять по вертикали, этот div находится внутри некоторого контейнера (даже если контейнер является вашим <body>). Поэтому вы можете указать display: table-cell и vertical-align: middle в контейнере, а затем ваш div будет вертикально центрирован.
Однако, если вы заботитесь о IE7 и ниже, вам понадобится дополнительный контейнер, чтобы он работал (да, с помощью взлома).
Посмотрите эта скрипка. Он корректно отображается в IE6-9 и других основных браузерах. #container2 присутствует только для IE7 и ниже, поэтому, если вас это не волнует, вы можете удалить его, а также определенные условные стили IE.
Ответ 7
Установите изображение в качестве фона div и выровняйте его по центру
Ответ 8
попробуйте 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>
Ответ 9
Это возможно, если вы знаете высоту изображения или флэш-объекта, который будет центрирован. Вам не нужно знать высоту/ширину контейнера, но вам нужно знать высоту и ширину.
Это возможно, используя float, clear и negative margin. Пример: www.laurenackley.com домашняя страница.
HTML
<div id='container'><!-- container can be BODY -->
<div id='vertical-center'> </div>
<div id='contained-with-known-height'>
<p>stuff</p>
</div>
</div>
CSS
#vertical-center{
height:50%;
width:1px;
float:left;
margin-bottom:-50px;/** 1/2 of inner div known height **/
}
#contained-with-known-height{
height:100px;
clear:left;
margin:0 auto;/** horizontal center **/
width:700px;
text-align:left;
}
#container{/** or body **/
text-align:center;
/** width and height unknown **/
}
Если вы не знаете ширину/высоту внутренних элементов. Вам не повезло с <div>. BUT - ячейки таблицы (<td>) поддерживают vertical-align:middle; Если вы не можете сделать это с помощью элемента div выше, перейдите со столом внутри контейнера и поместите div, который вы центрирование внутри td с выравниванием по вертикали.