Давайте подробно разберем, как правильно выровнять изображение или картинку по вертикали на странице, где все будет исполнено при помощи CSS. Картинки ли изображение изначально включаются на ваш сайт различными способами, но примерно с помощью стилистики CSS. Они могут быть выровнены и поплыли, чтобы изображения, которые будут размещены в определенном месте на странице. 

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

Выравнивание оставляет довольно много пустого пространства на вашем сайте. Вы увидите пустое пространство, когда вы пройдете через секцию выравнивания. Для этого нам нужно изображение и блок div, для того, чтоб выровнять картинку по вертикали. 

Первое, это нам не известны ни реальные размеры как изображение, так и размеры блока. 

Вариант 1. Изображение с абсолютным позиционированием 

HTML 

<div class="kartinku-vertikali"> 
  <img src="путь до картинки" alt="" > 
</div>

CSS 

.kartinku-vertikali { 
  height: 100px; 
  position: relative; 
} 
.kartinku-vertikali img { 
  position: absolute; 
  margin: auto; 
  left: 0; 
  top: 0; 
  bottom: 0; 
  right: 0; 
  }

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

Пример:1 

Выравнивание картинки по центру div 


Вариант 2. Где задействуем table-cell 

Верстка идет в аналогичном примере под номер один: 

HTML 

<div class="kartinku-vertikali"> 
  <img src="путь до картинки
" alt="Через table-cell" > 
</div>

CSS 

.kartinku-vertikali { 
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
  width: 500px; 
  height: 100px; 
}

В аналогичном порядке высота может быть динамической. Но также здесь присутствует одно НО – это безусловно ширину блока, где уже нельзя указать на 100%, она должна быть задана width. 

Пример:1.1 

Установить высоту линии в div контейнера и выровнять изображение 


2. Здесь уже известна высота блока, но не известна высота изображения 

Здесь пригодится вариант, где все можно исполнить через line-height, где изначальная высота снимка должна быть меньше высоты основного блока. 

HTML 

<div class="vestnav-usotoka"> 
  <img src="путь до картинки" alt="Позиционирование картинки" > 
</div>

CSS 

.vestnav-usotoka { 
  height: 100px; 
  line-height: 100px; 
  text-align: center; 
} 
.vestnav-usotoka img { 
  vertical-align: middle; 
}

Вот и все, осталось посмотреть пример, как все выглядит. 


Свойство CSS обычно используется для поворота и масштабирования элементов, но с его функцией теперь мы можем вертикально выравнивать элементы. Обычно это должно быть сделано с абсолютным позиционированием или установкой высоты строки.