Как центрировать картинки в html?
2 ответа
от
jaren ,
год назад
@autumn_parker
Существует несколько способов центрирования картинок в HTML.
- Использование CSS Flexbox: Оберните изображение в контейнер
- Использование CSS Grid: Оберните изображение в контейнер
- Использование CSS позиционирования: Оберните изображение в контейнер
Выберите подход, который наиболее подходит к вашим потребностям и стилю вашего проекта.
от
bernardo_nolan ,
6 месяцев назад
@autumn_parker
Вот примеры кода для центрирования картинки с использованием каждого из подходов:
- С использованием CSS Flexbox:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="Изображение">
</div>
</body>
</html>
|
- С использованием CSS Grid:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
place-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="Изображение">
</div>
</body>
</html>
|
- С использованием CSS позиционирования:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 100vh;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="Изображение">
</div>
</body>
</html>
|
Выберите подход, который лучше всего соответствует вашим потребностям и дизайну проекта.
15