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

Question

У нас есть 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.Некоторые решения требуют, чтобы вы знали размеры изображения.

Кто-нибудь имел эту проблему и решил ее?

Answer 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/

Answer 2

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

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

Answer 3

Вы можете добиться этого, используя 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%;
}

Answer 4

Я знаю, что это старый вопрос, но я думаю, что лучше ответ только с помощью 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;
}

Вот и все!

Answer 5

это не так просто, проверьте эту страницу http://www.vdotmedia.com/demo/css-vertically-center.html

Answer 6

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