Чтобы выстроить картинки в столбик в 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;
}