Вертикальное выравнивание изображения внутри div

Я хочу установить вертикальное выравнивание изображения внутри div. Я использую img {vertical-align: middle} но он не работает.

Ответ 1

Использование свойства line-height решит проблему:

<style> 
.someclass {
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  border: dotted;
}
.someclass img {
  margin: auto;
  vertical-align: middle;
}
</style>
<div class="someclass"> 
  <img src="someimg.jpg" border="0" alt=""> 
</div>

Ответ 2

Это решение, которое не требует JavaScript (как мое предыдущее решение).

Вы можете достичь того, чего хотите, назначив display: table-cell содержащему div. Вот пример: http://jsbin.com/evuqo5/2/edit

Я чувствую, что должен предупредить вас, что вам нужно будет проверить это в каждом браузере, который вы собираетесь поддерживать. Поддержка значения table-cell довольно новая, особенно в Firefox. Я знаю, что он работает в Firefox 4, но я не знаю ни одной из итераций 3.x. Вы также захотите протестировать в IE (я тестировал только в Chrome 10 и Firefox 4).

CSS:

  div#container {
    width: 700px;
    height: 400px;
    position: relative;
    border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;  
  }
  div#container img {
    margin: 0 auto;
    display: block;
  }

Вам не понадобятся стили div#container img, если вы также не хотите горизонтально выравнивать изображение.

Ответ 3

Смотрите этот awser: Как вертикально выравнивать изображение внутри div

Если вы хотите также выровнять по горизонтали, добавьте right и left, например:

div {
  position:relative;
}
img {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

Ответ 4

Если вы пытаетесь сделать то, что я думаю, вертикальное выравнивание не будет работать; вам нужно будет использовать позиционирование.

В общем, поместите контейнер относительно, а затем поместите изображение абсолютным, с верхним и левым значением на 50%, а затем переместите изображение обратно в центр, установив отрицательные поля равными половине ширины/высоты.

Вот рабочий пример: http://jsbin.com/evuqo5/edit

Основной CSS:

#container { position: relative; }
#container img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: /* -1/2 the height of the image */
  margin-left: /* -1/2 the width of the image */
}

Ответ 5

Если вы установите атрибут div display на table-cell, тогда vertical-align: middle; будет работать.

Правило vertical-align влияет только на ячейки или элементы таблицы с помощью display: table-cell.

Подробнее см. эту статью из SitePoint.

<style>
/* change body to .someClasses parent */

body {
  width: 100%;
  height:  100%;
  display: table;
}
body > .someclass {
    width: 300px;
    height: 300px;
    text-align: center;
    border:dotted;
    margin: 0 auto
    display: table-cell;
    vertical-align: middle;
}
</style>

<body>
    <div class="someclass"> 
        <img src="someimg.jpg" border="0" alt=""> 
    </div>
</body>

Ответ 6

В следующей статье есть несколько полезных ссылок:

Выравнивание текста с IE9 в стандартном режиме

Кроме того, в зависимости от версии IE, с которой вы тестируете, вы можете нуждаться в некоторых хакерах для браузера или каком-то jQuery/JavaScript-коде.

Если вам нужно, используйте таблицу с одной строкой и ячейкой и воспользуйтесь свойством vertical-align. Это грубая сила, не слишком смысловая, но она работает.