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

У меня такая разметка:

Div больше, чем img:

 div { height: 100px; } img { height: dynamic-value-smaller-than-100px; } 

Мне нужно, чтобы изображение находилось в середине div (с тем же уровнем белого пространства выше и ниже него).

Я пробовал это, и он не работает:

 div { vertical-align: middle; } 

если ваше изображение является чисто декоративным, то может быть более семантическим решением использовать его в качестве фонового изображения. Затем вы можете указать положение фона

 background-position: center center; 

Если он не является декоративным и представляет собой ценную информацию, то тег img оправдан. Что вам нужно сделать в этом случае – это стиль содержащего div со следующими свойствами:

 div{ display: table-cell; vertical-align: middle } 

Подробнее об этой технике читайте здесь . Сообщается, что он не работает на IE6 / 7 (работает над IE8).

Другой способ – установить высоту линии в контейнере div и выровнять изображение с помощью выравнивания по вертикали: по середине.

HTML:

 

CSS:

 .container { width: 200px; /* or whatever you want */ height: 200px; /* or whatever you want */ line-height: 200px; /* or whatever you want, should match height */ text-align: center; } .container > img { vertical-align: middle; } 

Это от головы. Но я использовал это раньше – он должен сделать трюк. Работает и для старых браузеров.

Предположим, вы хотите поместить изображение (40px X 40px) в центр (по горизонтали и по вертикали) div-classа = “box”. Итак, у вас есть следующий html:

 

Что вам нужно сделать, это применить CSS:

 .box img { position: absolute; top: 50%; margin-top: -20px; left: 50%; margin-left: -20px; } 

Ваш div может даже изменить его размер, изображение всегда будет находиться в центре его.

Это решение, которое я использовал ранее, чтобы выполнить вертикальное центрирование в CSS. Это работает во всех современных браузерах.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Выдержка:

  
any text
any height
any content, for example generated from DB
everything is vertically centered

(Встроенные стили для демонстрационных целей)

Другой вариант – установить display:block на img а затем установить margin: 0px auto;

 img{ display: block; margin: 0px auto; } 

Поскольку я тоже постоянно поддаюсь кросс-браузерному CSS, я хотел бы предложить здесь решение JQuery. Это занимает высоту родительского div каждого изображения, делит его на два и устанавливает его как верхнее поле между изображением и div:

 $('div img').each(function() { m = Math.floor(($(this).parent('div').height() - $(this).height())/2); mp = m+"px"; $(this).css("margin-top",mp); }); 

изображение, находящееся в середине div

 div img{ bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; height:50px; width:50px; } 

Я разместил о вертикальном выравнивании в кросс-браузере (вертикально центрируйте несколько ящиков с помощью CSS )

Создайте таблицу с одной ячейкой. Только таблица имеет вертикальное выравнивание по вертикали

 div { width:200px; height:150px; display:-moz-box; -moz-box-pack:center; -moz-box-align:center; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; display:box; box-pack:center; box-align:center; } 

В вашем примере высота div статична, а высота изображения статична. Дайте изображению значение margin-top ( div_height - image_height ) / 2

Если изображение равно 50px, тогда

 img { margin-top: 25px; } 

Вы пробовали установить маржу на div? например

 div { padding: 25px, 0 } 

для верхней и нижней. Вы также можете использовать процент:

 div { padding: 25%, 0 } 
 

Принятый ответ не сработал для меня. vertical-align требует партнера, чтобы они могли быть выровнены в их центрах. Поэтому я создал пустой div с полной высотой родительского div, но без ширины для выравнивания изображения. inline-block необходим для того, чтобы оба объекта оставались в одной строке.

 

CSS:

 .class { height: 100%; width: 0%; vertical-align: middle; display: inline-block } img { display: inline-block; vertical-align: middle; } 
     Untitled Document      
  • Можно ли использовать несколько фоновых изображений с помощью CSS?
  • В чем разница между px, em и ex?
  • Поиск CSS Parser в java
  • Как переключить таблицу стилей CSS с помощью jQuery?
  • Кросс-браузерный CSS
  • Усечение длинных строк с помощью CSS: возможно?
  • Выберите каждый элемент N в CSS
  • display: table-cell, не работающая на входном элементе
  • Вертикальное выравнивание изображения
  • Селектор CSS, включающий псевдо-class first-child и dropcap
  • Как создать дочерние компоненты из css-файла родительского компонента?
  • Давайте будем гением компьютера.