CSS: выровнять div по вертикали, если не известен фиксированный размер div - PullRequest
Новая
       11

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

45 голосов
/ 26 августа 2011

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

Ответы [ 9 ]

45 голосов
/ 02 сентября 2011

Это чистое решение 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.

12 голосов
/ 31 августа 2011

Вы можете сделать это с помощью встроенных блоков, один с 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; }, поэтому встроенные блоки будут работать для блочных элементов.

8 голосов
/ 03 сентября 2011

В дополнение к другим ответам здесь, модель гибкого бокса 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 голосов
/ 30 августа 2011

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

Однако я столкнулся с проблемой с его решением с помощью веб-набора.Похоже, что 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 с этим кодом.

2 голосов
/ 29 августа 2011

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

1 голос
/ 30 августа 2011

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

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

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

0 голосов
/ 02 сентября 2011

попробуйте трюк с 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 голосов
/ 02 сентября 2011

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

0 голосов
/ 29 августа 2011

Это возможно, если вы знаете высоту изображения или объекта вспышки по центру. Вам не нужно знать высоту / ширину контейнера, но вам нужно знать высоту / ширину контейнера.

Возможно использовать плавающие, чистые и отрицательные поля. Пример: www.laurenackley.com домашняя страница.

HTML 

<div id='container'><!-- container can be BODY -->
  <div id='vertical-center'>&nbsp;</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's 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>. НО - ячейки таблицы (<td>) поддерживают vertical-align:middle; Если вы не можете сделать это с помощью элементов div, приведенных выше, возьмите таблицу внутри контейнера и поместите div, который вы центрируете внутри тд с вертикально выровненной серединой.

...