Как сделать картинки в столбик в css

Чтобы выстроить картинки в столбик в CSS, можно использовать свойство «display» и задать значение «block» для каждой картинки.

Если у вас уже есть элементы с классом «image», вы можете задать следующие стили:

.image {
  display: block; /* задает блочный тип элементов */
  margin-bottom: 10px; /* задает отступы между картинками */
}

Если вы хотите использовать элементы «img», можно создать контейнер и применить к нему следующие стили:

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.image-container img {
  display: block; /* задает блочный тип элементов */
  margin-bottom: 10px; /* задает отступы между картинками */
}

Второй пример позволяет выровнять картинки по центру контейнера, добавив в стили для «.image-container» свойство «text-align: center;».

.image-container {
  text-align: center;
}

.image-container img {
  display: block;
  margin-bottom: 10px;
}

Также можно использовать флексбоксы, чтобы выстроить элементы в столбик. Например:

.image-container {
  display: flex; /* устанавливает элементы контейнера в линию */
  flex-direction: column; /* указывает, что элементы должны быть расположены вертикально */
  align-items: center; /* выравнивает элементы по центру по вертикали */
}

.image-container img {
  display: block;
  margin-bottom: 10px;
}