Рассмотрим, как правильно выровнять картинку по вертикали на странице
Итак, у нас есть картинка и есть блок div. Как выровнять картинку по вертикали?
1. Нам не известны ни размеры картинки, ни размеры блока
Вариант 1. Картинка с абсолютным позиционированием
Верстка такая:
1 2 3 | <div class="outer">
<img src="smile.gif" alt="" >
</div> |
Стили:
1 2 3 4 5 6 7 8 9 10 11 12 | .outer { height: 100px; position: relative; } .outer img { position: absolute; margin: auto; left: 0; top: 0; bottom: 0; right: 0; } |
Height введен только чтобы расширить блок, он может быть динамическим, и картинка всегда будет по центру.
Пример:
Вариант 2. Через table-cell
Верстка как и в первом примере:
1 2 3 | <div class="outer1"> <img src="smile.gif" alt="" > </div> |
Стили:
1 2 3 4 5 6 7 | .outer1 { display: table-cell; vertical-align: middle; text-align: center; width: 500px; height: 100px; } |
Здесь тоже высота может быть динамической. Но есть одно НО – ширину блока уже нельзя указать в 100%, должен быть задан width.
Пример:
2. Нам известна высота блока, но не известна высота картинки
Способ через line-height. Высота картинки должна быть меньше высоты блока.
Верстка:
1 2 3 | <div class="outer2">
<img src="smile.gif" alt="" >
</div> |
Стили:
1 2 3 4 5 6 7 8 | .outer2 { height: 100px; line-height: 100px; text-align: center; } .outer2 img { vertical-align: middle; } |
Пример:
Нам известна высота картинки, но неизвестна высота блока
Способ через абсолютное позиционирование картинки
Суть этого способа заключается в добавлении картинке position: absolute, отодвигании ее сверху на 50% через свойство top, а потом добавлении отрицательного margin, равного половине высоты этой картинки. Также можно выравнивать картинку и по горизонтали (добавлением свойств top: 50% и margin-top, равного половине ширины картинки).
Верстка:
1 2 | <div class="outer4">
<img src="http://ktvd.ru/wp-content/uploads/smile.gif" alt=""> </div> |
Стили:
1 2 3 4 5 6 7 8 9 10 11 12 | .outer4 {
position: relative;
border: 1px solid aqua;
width: 100%;
height: 100px;
}
.outer4 img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -23px;
margin-left: -20px; |
Пример:
Можно применять и для выравнивания вложенных блоков, но у них должны быть указаны width и height.
Совершенно верно! Спасибо за дополнение 🙂
Круто, спасибо! Верстаю 2.5 года — про вариант 1 слышу в первый раз)
Рады, если смогли помочь :))
Первый вариант не работает в Firefox
Если изображение выравнивать с помощью line-height то этот line-height для блока нужно ставить на 3px меньше. Т.е. Если ваш блок имеет высоту и бордер а изображение будет на всю высоту блока то оно будет вылазить за границы блока.
не знаю почему может кто-то знает?
Спасибо! Первый вариант подошел. Работает так же если высота блока меньше высоты изображения.
Кстати. На этой странице заголовок сайта поплыл http://prntscr.com/d8svwj
Тот скрин удалили. Вот другой http://prntscr.com/d8sz3d
Спасибо, что обратили наше внимание. Скоро поправим :))
Спасибо, добрый человек!
По-моему самый простой способ выровнять изображения разного размера по вертикали — использовать flexbox.
Например, в контейнер помещается x изображений разного размера.
Свойства для контейнера:
display: flex
align-items: center
Класс ! Лишь двумя строчками.
Огромное спасибо! Действительно работает в отличии от остального
Большое спасибо!
Здравствуйте! Очень полезно, все хорошо работает. А не могли бы вы подсказать, как сделать так, чтобы height в первом случае была именно динамической? Спасибо!
Спасибо все работает!
Статья старье, но ранжируется. Вот свежее решение — свойства для div — обертки:
display: flex;
justify-content: center;
align-items: center
Картинка просто должна быть инлайн
Большое спасибо за дополнение!