вертикальное выравнивание изображения внутри div - PullRequest
Новая
       16

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

13 голосов
/ 25 марта 2011

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

Ответы [ 6 ]

16 голосов
/ 25 марта 2011

Использование свойства 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>
6 голосов
/ 29 марта 2011

Это решение, для которого не требуется 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стили, если вы не хотите выравнивать изображение по горизонтали.

2 голосов
/ 01 июля 2013

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

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

div {
  position:relative;
}
img {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
2 голосов
/ 25 марта 2011

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

В общем, расположите контейнер относительно, а затем установите абсолютное изображение, с верхним и левым значениями, равными 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 */
}
0 голосов
/ 25 марта 2011

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

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

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

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

0 голосов
/ 25 марта 2011

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

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

См. эту статью из SitePoint для подробного объяснения. 

<style>
/* change body to .someClasses's 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>
...