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

у меня есть разметка, как это:

<div>
  <img />
</div>

div выше, чем img:

div {
  height: 100px;
}

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

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

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

div {
  vertical-align: middle;
}
14 67
css

14 ответов:

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

background-position: center center;

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

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

подробнее об этой технике здесь. Не работает на IE6/7 (работает на IE8).

73

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

html:

<div class="container"><img></div>

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;
}

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

51

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

<div class="box"><img /></div>

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

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

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

8

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

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

выдержка:

  <div style="display: table; height: 400px; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;">
      <div style="position: relative; top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

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

5

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

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

поскольку я тоже постоянно разочаровываюсь в кросс-браузерном 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);
});
2

изображение должно быть в середине div 

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

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

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

1
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>
<img src="images/logo.png" />
</div>
1

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

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

img {
    margin-top: 25px;
}
0

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

div {
    padding: 25px, 0
}

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

div {
    padding: 25%, 0
}
0
<div style="background-color:#006600; width:300px; text-align:center; padding:50px 0px 50px 0px;">
<img src="imges/import.jpg" width="200" height="200"/>
</div>
0

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

<div>
    <div class="placeholder"></div>
    <img />
</div>

CSS:

.class {
    height: 100%;
    width: 0%;
    vertical-align: middle;
    display: inline-block
}
img {
    display: inline-block;
    vertical-align: middle;
}
0
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function ($) {

$.fn.verticalAlign = function() {
    return this.each(function(i){
    var ah = $(this).height();
    var ph = $(this).parent().height();
    var mh = Math.ceil((ph-ah)/2);
    $(this).css('margin-top', mh);
    });
};
})(jQuery);

$(document).ready(function(e) {


$('.in').verticalAlign();


});

</script>

<style type="text/css">
body { margin:0; padding:0;}
.divWrap { width:100%;}
.out { width:500px; height:500px; background:#000; text-align:center; padding:1px; }
.in { width:100px; height:100px; background:#CCC; margin:0 auto; }
</style>
</head>

<body>
<div class="divWrap">
<div class="out">
<div class="in">
</div>
</div>
</div>

</body>
</html>
0