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

Question

у меня есть проблемы с изображением вертикального выравнивания в DIV

.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; 
} 

.img_thumb img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
} 

<div class="img_thumb"> 
    <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a> 
</div> 

Насколько я знаю, что нужно «дисплей: блок;» позиционировать изображение в центре и что работает. Также в учебниках я нахожу много ответов, но они не «полезны», потому что все мое изображение НЕ на одной высоте!

Answer 1

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

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

EDIT

Ваш код должен выглядеть следующим образом:

.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; 
} 

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

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

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

UPDATE

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

Назад в 2014, Microsoft announced, что он остановит поддержку 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, here's a good resource.

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

Answer 2

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

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/

Answer 3

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

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

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

---

JSFiddle demo

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

.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>