У меня такая разметка:
<div>
<img />
</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:
<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;
}
Это с моей головы. Но я использовал это раньше - он должен сделать трюк. Работает и для старых браузеров.
Предположим, вы хотите поместить изображение (40px X 40px) в центр (горизонтальный и вертикальный) div class= ". Итак, у вас есть следующий html:
<div class="box"><img /></div>
Что вам нужно сделать, это применить 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
Выдержки:
<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>
(встроенные стили для демонстрационных целей)
Другой вариант - установить 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>
<img src="images/logo.png" />
</div>
В вашем примере высота div статическая, а высота изображения статична. Дайте изображению значение margin-top ( div_height - image_height ) / 2
Если изображение равно 50px, то
img {
margin-top: 25px;
}
Вы пытались установить маржу на div? например.
div {
padding: 25px, 0
}
для верхнего и нижнего. Вы также можете использовать процент:
div {
padding: 25%, 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>
Принятый ответ не помог мне. 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;
}
<!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>