Вертикальное выравнивание изображения в div

Ответ 1

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

Вот пример: http://jsfiddle.net/Cthulhu/QHEnL/1/

ИЗМЕНИТЬ

Ваш код должен выглядеть так:

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}

Изображения всегда будут центрироваться по горизонтали и по вертикали, независимо от их размера. Здесь еще два примера с изображениями разных размеров:

http://jsfiddle.net/Cthulhu/QHEnL/6/

http://jsfiddle.net/Cthulhu/QHEnL/7/

UPDATE

Теперь в 2016 году (будущее!) и выглядит как несколько вещей меняются (наконец!).

В 2014 году Microsoft анонсировала, что она перестанет поддерживать IE8 во всех версиях Windows и будет поощрять всех пользователей обновляться до IE11 или Edge. Ну, это должно произойти в следующий вторник (12 января).

Почему это имеет значение? С объявленной смертью IE8 мы можем, наконец, начать использовать магию CSS3.

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

.container {
    position: relative;
}

.container .element {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Используя этот метод transform: translate();, вам даже не нужно иметь фиксированную высоту в вашем контейнере, полностью динамически. Ваш элемент имеет фиксированную высоту или ширину? Ваш контейнер также? Нет? Это не имеет значения, он всегда будет центрирован, потому что все свойства центрирования фиксированы на дочернем элементе, независимо от родителя. Спасибо CSS3.

Если вам нужно только центрировать в одном измерении, вы можете использовать translateY или translateX. Просто попробуйте некоторое время, и вы увидите, как это работает. Кроме того, попробуйте изменить значения translate, вы найдете это полезным для нескольких ситуаций.

Здесь есть новая скрипка: https://jsfiddle.net/Cthulhu/1xjbhsr4/

Для получения дополнительной информации о transform, здесь хороший ресурс.

Счастливое кодирование.

Ответ 2

Старый вопрос, но в настоящее время CSS3 делает вертикальное выравнивание действительно простым!

Просто добавьте к <div> этот css:

display:flex;
align-items:center;
justify-content:center;

JSFiddle демо

Живой пример:

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    display:flex;
    align-items:center;
    justify-content:center;
}

<div class="img_thumb">
    <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images">
       <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" />
    </a>
</div>

Ответ 3

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

inline-elements :- <img style="vertical-align:middle" ...>
                   <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>  

block-elements :- <td style="vertical-align:middle"> ... </td>
                  <div style="display:table-cell; vertical-align:middle"> ... </div>

см. демонстрацию: - http://jsfiddle.net/Ewfkk/2/