devaloevera
@devaloevera
рукожоп

Как отцентрировать flexbox-ом картинку по центру?

Как отцентрировать flexbox-ом картинку по центру ?
Вот что я хотел
5bf54b987ee8f243273946.png
<div class="about">
				<div class="abou__item">
					<span>about</span>
					<img src="img/about1.jpg" alt="">
				</div>
				<div class="abou__item">
					<img src="img/about2.jpg" alt="">
					<span>about</span>
				</div>
				<div class="abou__item">
					<span>about</span>
					<img src="img/about3.jpg" alt="">
				</div>
				<div class="abou__item">
					<span>about</span>
					<img src="img/about4.jpg" alt="">
				</div>
		</div>


.about {
	display: flex;
	flex-direction: column;
	align-items: center;
}
  • Вопрос задан
  • 3848 просмотров
Решения вопроса 2
shmatuan
@shmatuan
8 year of Web, 5 years of Vue
<span>about</span> сделать фиксированной ширины + добавить второй с другой стороны и сделать ему opacity: 0
<div class="abou__item">
  <span>about</span>
  <img src="img/about2.jpg" alt="">
  <span style="opacity: 0;">about</span>
</div>


Тогда этот блок будет всегда одинаковой ширины, с картинкой посередине
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Например так:
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@coderxx
keep calm and learn js
justify-content: center; // центируем по оси х
align-items: center; // центируем по оси у
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы