Как сверстать эту часть макета?

Question

[Алексей]

Добрый день всем. Скачал тренировочный лендинг, сверстал почти полностью, но застопорился на предпоследнем секшене
.
Скрин прилагаю. Пытался и через флоаты, и через флекс - никак не пойму, как зафиксировать картинку по центру и разместить по сторонам текст так, чтобы он не сдвигал эту самую картинку.
П.С наполнение элементов не важно, главное - принцип их расположения

Comments

[FeST1VaL]

Через флексы легко по сути... строка под строкой с пустым блоком в зависимости от направления т.е:

<div class='flex'>
 <div class='empty'></div>
 <div class='image'></div>
 <div class='text'></div>
</div>
<div class='flex'>
 <div class='text'></div>
 <div class='image'></div>
 <div class='empty'></div>
</div>

[leni_m]

либо делаешь блоки с картинками по центру с position: relative; и пихаешь тексты внутрь этого блока с position: absolute; и двигаешь куда надо.

Answer 1

[Odisseya]

Comments

[Фаниль Зубаиров]

Вы забыли подключить React и редакс. А то слишком просто получилось ;)

[Odisseya]

)

[Алексей]

Шок, у меня сейчас голова взорвется. Спасибо, буду разбираться :)

[Odisseya]

Алексей, гуглите в сторону «timeline html css», а в непонятных случаях поглядывайте на w3schools.com

Answer 2

[Фаниль Зубаиров]

Без кода не понятно. Не понятно, где у тебя проблема. Покажи код

Comments

[Алексей]

.comment_item {
		margin-top:92px;
		border: 1px solid red;
		width: 100%;
		justify-content: center;
	}

	.comment_item p {		
		box-sizing: border-box;
		padding: 0;
		margin: 0;
		width: 281px;
		border: 1px solid red;
	}

	.comment_item img {	
		border: 1px solid red;
		margin: 0px 39px;
		text-align: center;

[Алексей]

Алексей, Алексей,
получается что то типа такого - это на флексах

[Фаниль Зубаиров]

.comment_item должен быть display: flex, .comment_item img должен быть align-self: center.
А вообще, я не уверен, что картинка должна быть отцентрирована вертикально, скорее всего она должна быть сверху вначале.