Как вертикально выравнивать изображение внутри div с динамической высотой?

У нас есть div, который содержит изображение, которое загружает пользователь. Это код:

HTML:

<div class="container_img">
    <img height="120" width="150" src="[image name].jpg">
</div>

CSS

div.container_img {
    overflow: hidden;
    width: 150px;
    height: 150px;
}

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

Я пробовал искать решения в сети, но я не могу найти тот, который работает с динамическими изображениями внутри DIV. Некоторые решения требуют, чтобы вы знали размеры изображения.

У кого-нибудь была эта проблема и она была решена?

Ответы

Ответ 1

Для определения высоты изображения вам нужно использовать JavaScript/jQuery. CSS не является динамическим языком, и вы не можете определить высоту с использованием чистого css. Используя jQuery, вы можете сделать

JQuery

var $img = $('div.container_img img');
var h = $img.height();
$img.css('margin-top', + h / -2 + "px"); //margin-top should be negative half of image height. This will center the image vertically when combined with position:absolute and top:50%.

CSS

div.container_img {
    position:relative; 
    width: 150px;
    height: 300px;
}

div.container_img img{
    position:absolute;
    top:50%;
}

Проверьте рабочий пример http://jsfiddle.net/nQ4uu/2/

Ответ 2

div.container_img {
    display: table-cell;
    vertical-align: middle;
    /* other attributes */
}

работает, но я не уверен, что он работает на всех версиях IE.

Ответ 3

Я думаю, что вы не сможете выровнять изображение по вертикали с помощью любой прямой техники. Вы можете видеть this для выравнивания изображения по горизонтали, хотя...

Ответ 5

Вы можете добиться этого, используя flex в css:

div.container_img {
    position:flex; 
     width: 150px;
    height: 150px;
    justify-content: center;
}

div.container_img img{
  margin-top: auto;
  margin-bottom: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

Ответ 6

Я знаю, что это старый вопрос, но я думаю, что я буду отвечать только с помощью CSS

DEMO jsFiddle

HTML

 <div id="centered"></div>

CSS

#centered {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100px;
    width: 300px;
    margin: auto;
    background-color: grey;
}

Что это!