Как выровнять картинку по вертикали

Рассмотрим, как правильно выровнять картинку по вертикали на странице


Итак, у нас есть картинка и есть блок 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;

Пример:

12 thoughts on “Как выровнять картинку по вертикали

  • 25.07.2015 в 09:42
    Permalink

    Можно применять и для выравнивания вложенных блоков, но у них должны быть указаны width и height.

    Ответить
    • 14.09.2015 в 18:34
      Permalink

      Совершенно верно! Спасибо за дополнение 🙂

      Ответить
  • 28.05.2016 в 21:45
    Permalink

    Круто, спасибо! Верстаю 2.5 года — про вариант 1 слышу в первый раз)

    Ответить
  • 07.10.2016 в 13:23
    Permalink

    Если изображение выравнивать с помощью line-height то этот line-height для блока нужно ставить на 3px меньше. Т.е. Если ваш блок имеет высоту и бордер а изображение будет на всю высоту блока то оно будет вылазить за границы блока.
    не знаю почему может кто-то знает?

    Ответить
  • 18.11.2016 в 14:42
    Permalink

    Спасибо! Первый вариант подошел. Работает так же если высота блока меньше высоты изображения.

    Кстати. На этой странице заголовок сайта поплыл http://prntscr.com/d8svwj

    Ответить
  • 09.04.2017 в 12:44
    Permalink

    По-моему самый простой способ выровнять изображения разного размера по вертикали — использовать flexbox.

    Например, в контейнер помещается x изображений разного размера.
    Свойства для контейнера:
    display: flex
    align-items: center

    Ответить
  • 01.12.2017 в 11:28
    Permalink

    Огромное спасибо! Действительно работает в отличии от остального

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *