Как вертикально выравнивать изображение и текст в DIV с помощью CSS?

У меня есть изображение и некоторый текст внутри div, и я хотел бы поместить изображение и текст в вертикальный центр div с помощью CSS. Проблема в том, что я не знаю, сколько строк текста у меня будет, но текст и изображение должны быть ВСЕГДА посередине. Например, когда есть только одна строка текста, div должен выглядеть так:

Если в конце концов у меня больше строк или высота текста больше высоты изображения, тогда изображение должно быть выровнено так:

У меня возникли проблемы с этим эффектом, есть ли способ без использования javascript для этого?

набл. Родительский div из div, к которому я имею в виду, имеет позицию: relative, поэтому есть и другая проблема.

Ответы

Ответ 1

Дайте изображению и текстуу вертикальное выравнивание: среднее - текст должен содержаться в элементе, который также отображается: inline. Так что разметка выглядит следующим образом:

<div>
  <span><img src="blah.jpg" /></span>
  <span>text text text</span>
</div>

div {
  display: table;
}

img {
  vertical-align: middle;
  display: table-cell;
}
span {
  vertical-align: middle;
  display: table-cell;
}

должен работать. Здесь jsfiddle, чтобы продемонстрировать (отредактированный скрипт, чтобы показать, что все также выровнено по вертикали внутри контейнера.)

EDIT: для получения желаемого поведения я рекомендую использовать дополнительные свойства отображения - таблицу для контейнера и таблицы-ячейки для содержащихся элементов. Ссылка Fiddle была обновлена с изменениями.

EDIT: единственный способ, которым я мог придумать, чтобы заставить его работать, - это обернуть изображение в другой встроенный контейнер, в данном случае промежуток. Я обновил скрипт, чтобы продемонстрировать.

Ответ 2

Вы можете попробовать это, пример здесь.

CSS

div.parent{ 
    border:solid black 1px;
    display:table;
    padding:5px; 
    width:100%;
    margin:5px 0; /* you can change/remove margin */
}
div.text{ 
    vertical-align:middle;
    display:table-cell;
    text-align:justify;
}
div.parent .img{
    vertical-align:middle;
    display:table-cell;
    padding-right:5px;
    width:50px; /* you can change width */
}
div.img img{ 
    width:100%;
    height:50px; /* you can change height */
    vertical-align:middle;
}

HTML:

<div class="parent">
    <div class="img"><img src="http://example.com.img1.png" /></div>
    <div class="text">Some Text Some.</div>
</div>