Вопрос по vertical-alignment, css, image – выровнять изображение по вертикали в div [duplicate]

58

This ques#ion already has an answer here:

How #o ver#ically align an image inside a div? 34 answers

у меня проблема с изображением по вертикали в div

&l#;code&g#;.img_#humb {
    floa#: lef#;
    heigh#: 120px;
    margin-bo##om: 5px;
    margin-lef#: 9px;
    posi#ion: rela#ive;
    wid#h: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}

.img_#humb img {
    display: block;
    margin-lef#: au#o;
    margin-righ#: au#o;
    ver#ical-align: middle;
}

&l#;div class="img_#humb"&g#;
    &l#;a class="images_class" href="large.jpg" rel="images"&g#;&l#;img src="small.jpg" #i#le="img_#i#le" al#="img_al#" /&g#;&l#;/a&g#;
&l#;/div&g#;
&l#;/code&g#;

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

Ваш Ответ

3   ответа
132

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

Вот пример: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 объявила что он перестанет поддерживать IE8 во всех версиях Windows и будет поощрять всех пользователей к обновлению до IE11 или Edge. Ну, это должно произойти в следующий вторник (12 января).

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

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

.container {
    position: relative;
}

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

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

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

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

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

Удачного кодирования.

Спасибо за обновление ответа с 2016 года. Работает как шарм !!!
Это казалось таким простым решением, но я не мог заставить его работать. После выделения каждой части моего шаблона WordPress я понял, что проблема заключается в моем типе документа. Переключился с 4.0 переходного на HTML5 doctype, и это сработало! Надеюсь, это поможет другим, кто может столкнуться с той же проблемой
Ответ Ктулху правильный, но если вы проверите пиксели снова и снова после изображения, вы заметите, что div имеет раздражающую верхнюю часть отступа в 3 пикселя (это зависит от размера шрифта). Чтобы избавиться от этого, просто добавьте font-size: 0; в див.
Обновление этого ответа 2016 года - золото! ;)
Это обновление было сцеплением! TY !!
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/

23

nowadays CSS3 делает вертикальное выравнивание действительноsimple!

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

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

JSFiddle demo

Live Example:

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

@MarksCode уже совместим со всеми современными браузерами (IE11 +) см.CanIUse, Это работает в IE10 тоже сprefixed version
Хорошо, я должен бояться использовать это, если это действительно ново?

Похожие вопросы