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

Существует несколько способов выравнивания изображения по вертикали с помощью CSS. Один из них — выравнивание по центру:

HTML:

<div class="container">
  <img src="image.png" alt="Изображение">
</div>

CSS:

.container {
  height: 400px; /* Высота контейнера */
  display: flex;
  align-items: center; /* Выравнивание по вертикали */
  justify-content: center; /* Выравнивание по горизонтали */
}

img {
  max-width: 100%; /* Сохранение пропорций изображения */
  max-height: 100%; /* Сохранение пропорций изображения */
}

В этом примере мы используем свойства display: flex;, align-items: center; и justify-content: center; для центрирования изображения по вертикали и горизонтали внутри контейнера. Важно задать высоту контейнера, чтобы свойство align-items работало корректно.

Вы также можете использовать свойство vertical-align: middle; для выравнивания содержимого по вертикали внутри блочных элементов, таких как изображения или таблицы. Например:

img {
  vertical-align: middle;
}

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