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

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

<div>
  <img />
</div>

div выше, чем img:

div {
  height: 100px;
}

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

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

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

div {
  vertical-align: middle;
}
css
67 голосов | спросил Josef Sábl 10 FebruaryEurope/MoscowbWed, 10 Feb 2010 17:53:14 +0300000000pmWed, 10 Feb 2010 17:53:14 +030010 2010, 17:53:14

14 ответов


0

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

background-position: center center;

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

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

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

ответил pixeline 10 FebruaryEurope/MoscowbWed, 10 Feb 2010 17:56:06 +0300000000pmWed, 10 Feb 2010 17:56:06 +030010 2010, 17:56:06
0

Другой способ - установить высоту строки в контейнере 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;
}

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

ответил akimsko 17 Jpm1000000pmThu, 17 Jan 2013 19:37:25 +040013 2013, 19:37:25
0

Допустим, вы хотите поместить изображение (40 x 40 пикселей) в центр (горизонтальный и вертикальный) элемента div class = "box" Итак, у вас есть следующий HTML:

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

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

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

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

ответил Diogo Melo 6 Jpm1000000pmSun, 06 Jan 2013 21:40:13 +040013 2013, 21:40:13
0

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

http://www.jakpsatweb.cz/css/css -vertical-центр-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>

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

ответил Shawn Steward 10 FebruaryEurope/MoscowbWed, 10 Feb 2010 18:19:08 +0300000000pmWed, 10 Feb 2010 18:19:08 +030010 2010, 18:19:08
0

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

img{
    display: block;
    margin: 0px auto;
}
ответил Kevin Bowersox 31 AM00000010000005531 2013, 01:17:55
0

Поскольку меня тоже постоянно разочаровывает кросс-браузерный 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);
});
ответил Cantrelby 17 MonEurope/Moscow2012-12-17T22:22:37+04:00Europe/Moscow12bEurope/MoscowMon, 17 Dec 2012 22:22:37 +0400 2012, 22:22:37
0

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

div img{ 
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    height:50px;
    width:50px;
}
ответил Ashish Maradiya 19 32014vEurope/Moscow11bEurope/MoscowWed, 19 Nov 2014 13:27:47 +0300 2014, 13:27:47
0

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

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

ответил Dewfy 10 FebruaryEurope/MoscowbWed, 10 Feb 2010 18:03:04 +0300000000pmWed, 10 Feb 2010 18:03:04 +030010 2010, 18:03:04
0
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>
ответил mab designer 12 Jam1000000amSun, 12 Jan 2014 03:45:26 +040014 2014, 03:45:26
0

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

Если изображение размером 50 пикселей, то

img {
    margin-top: 25px;
}
ответил mwcz 10 FebruaryEurope/MoscowbWed, 10 Feb 2010 17:57:47 +0300000000pmWed, 10 Feb 2010 17:57:47 +030010 2010, 17:57:47
0

Вы пытались установить поле для div? например.

div {
    padding: 25px, 0
}

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

div {
    padding: 25%, 0
}
ответил Keith Bloom 10 FebruaryEurope/MoscowbWed, 10 Feb 2010 18:01:40 +0300000000pmWed, 10 Feb 2010 18:01:40 +030010 2010, 18:01:40
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>
ответил Dinoop 23 J000000Monday12 2012, 12:34:44
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;
}
ответил MK Yung 11 12013vEurope/Moscow11bEurope/MoscowMon, 11 Nov 2013 20:35:24 +0400 2013, 20:35:24
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>
ответил 6 Jam1000000amWed, 06 Jan 2016 08:27:46 +030016 2016, 08:27:46

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132