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

Question

[Антонио Вивальди]

Как отцентрировать flexbox-ом картинку по центру ?
Вот что я хотел

<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;
}

Comments

[Дмитрий Грабко]

flexboxfroggy.com/#ru - рекомендую для понимания flex

Answer 1

[shmatuan]

<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>

Тогда этот блок будет всегда одинаковой ширины, с картинкой посередине

Comments

[Ankhena]

Если не писать лишнего, то и прозрачность не потребуется.

[shmatuan]

Ankhena, точно :D

[Антонио Вивальди]

Только вот у спана у меня толи что то с стилями вообщем я просто задал ширину и выровнять удалось.
НО я думал есть вариант сделать адаптивно без использования в дальнейшем медиазапросы.

<div class="abou__item">
<p >Proin iaculis purus consequat sem cure 
digni ssim. Donec porttitora entum suscipit 
aenean rhoncus posuere odio in tincidunt.</p>
  <img src="img/about1.jpg" alt="">
 <p class="about__text"></p>
</div>

.about {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.abou__item img{
	float: left;
}

.abou__item p {
	text-align: right;
	width: 200px;
	float: left;
}

Всем спасибо)

[Антонио Вивальди]

Антонио Вивальди, *со стилями

Answer 2

[Сергей delphinpro]

Например так:

Answer 3

[coderxx]

justify-content: center; // центируем по оси х
align-items: center; // центируем по оси у

Comments

[shmatuan]

И блоки выстроятся в середину, где картинки будут идти шахматно, а не на линии относительно друг друга.