Як вирівняти картинку по центру за допомогою CSS

🗓️ Оновлено: 02.08.2022
💬Коментарів: 0
👁️Переглядів: 4419

У цій статті розглянемо, які є методи вирівнювання картинки по центру блоку.

Давайте створимо нашу розмітку, з якою працюватимемо.

Створимо клас .wrap і всередину його додамо картинку з класом .photo

<div class="wrap">
  <img 
    src="https://images.unsplash.com/photo-1606421049683-c346eb99fafd?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2N3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60" 
    class="photo">
</div>

Тепер перейдемо до css. Задамо фіксовану ширину та висоту для блоку, а також додамо для нього border – щоб ми бачили межі елемента:

.wrap {
  width: 500px;
  height: 500px;
  border: 1px solid #000000;
}

А для самої картинки задамо ширину 250px:

.photo {
  width: 250px;
}

Ось так зараз виглядає наша розмітка:

Как выровнять картинку по центру с помощью css

Розмітка готова, тепер перейдемо до варіантів, як вирівняти картинку по центру блоку.

Перший варіант

Не ідеальний. Ми можемо додати до класу .wrap властивість text-align:center; і тоді все, що всередині блоку буде відцентровано горизонтальною осі.

.wrap {
  width: 500px;
  height: 500px;
  border: 1px solid #000000;
  text-align: center;
}
.photo {
  width: 250px;
}

Є ще варіант, як розмістити картинку по центру. Для цього потрібно її перевести в блоковий елемент і за допомогою margin: auto; виставити по центру:

.photo {
  width: 250px;
  display: block;
  margin: auto;
}

Далі ми перейдемо до варіантів, які дозволять нам вирівняти картинку центром блоку і вирівняти її по вертикалі.

Другий варіант

За допомогою display:flex ми можемо відцентрувати не тільки по осі x, але і по осі y. Давайте додамо класу .wrap такі властивості:

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

Отримаємо таку картину:

А якщо пропишемо наступний код:

.wrap {
  width: 500px;
  height: 500px;
  border: 1px solid #000000;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

То за горизонтальною осі вирівняємо по правому краю (властивість justify-content: flex-end), а за допомогою align-items: flex-end; вирівняємо зображення по нижньому краю.

Третій варіант

Якщо попередні два варіанти центрували не тільки картинку, але й будь-який вміст усередині блоку .wrap, наступний варіант буде відноситися тільки до картинки.

.wrap {
  width: 500px;
  height: 500px;
  border: 1px solid #000000;
  position: relative
}
.photo {
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Це основні способи, які дозволять вирівняти картинку по центру блоку. Якщо ви знайшли більш зручний спосіб реалізувати це завдання, поділіться в коментарях.

А якщо залишилися питання, то раджу подивитися відео, де я докладно пояснюю і показую в дії перераховані вище способи.

Стаття була корисною?
👍
Так - 5
👎
Ні - 3
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 14204
Поява елементів при скролі
Переглядів: 13437
Як зробити ефект натискання кнопки на CSS
Переглядів: 4766
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 4558
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 4419
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab