Как зафиксировать иконку над текстом?

Question

[Quartex]

Всем привет, вот есть блоки li, но когда у меня текст больше другого, то иконка съезжает

html:

<div class="container" >
			<ul class="how-we-work-categories">
				<li>
						<img src="images/call.png">
						<div class="text">Вы оставляете заявку на сайте</div>
				</li>
				<li>
						<img src="images/call.png">
						<div class="text">Наш менеджер связывается с нами для подвтерждения заказа</div>
				</li>
				<li>
						<img src="images/call.png">
						<div class="text">Мы доставляем товар удобным для Вас способом</div>
				</li>
				<li>
						<img src="images/call.png">
						<div class="text">Вы получаете товар и наслаждаетесь</div>
				</li>
			</ul>
		</div>

Comments

[Александр]

Выкладывайте отрывок кода в песочницу, тогда вам возможно помогут

[Quartex]

Александр, я думал, что есть какой-то метод просто,вот код html

<div class="container" >
			<ul class="how-we-work-categories">
				<li>
						<img src="images/call.png">
						<div class="text">Вы оставляете заявку на сайте</div>
				</li>
				<li>
						<img src="images/call.png">
						<div class="text">Наш менеджер связывается с нами для подвтерждения заказа</div>
				</li>
				<li>
						<img src="images/call.png">
						<div class="text">Мы доставляем товар удобным для Вас способом</div>
				</li>
				<li>
						<img src="images/call.png">
						<div class="text">Вы получаете товар и наслаждаетесь</div>
				</li>
			</ul>
		</div>

картинка, забыл поставить

[Антон Спирин]

Quartex, используйте flex.

[Quartex]

Антон Спирин, Спасибо,получилось

Answer 1

[Андрей Федоров]

Если максимальная высота текста 4 строки, а межстрочный интервал 1.2, то 4 х 1.2 = 4.8

.text {
 min-height: 4.8em;
 vertical-align: top;
}

Answer 2

[Роман]

Попробуйте flex

.how-we-work-categories {
  display: flex;
  justify-content: space-between; 
}

Comments

[Quartex]

Все работает, спасибо, такой еще маленький вопрос, а между иконкой и текстом как можно отступ сделать?

[Роман]

.text {
margin-top: 20px;
}

Answer 3

[deeppines]

А если не изобретать велосипед и картинку помещать в блок с фиксированной высотой, делать от него отступ вниз, а уж сколько будет внизу текста не имеет значения.

Comments

[Роман]

А если картинка будет меняться?

[deeppines]

Роман, абсолютом вписывается в фиксированный блок с max-width: 90% и центрируется.
Но тут опять же есть свои ограничения, если блок квадратный то и картинка должна быть квадратной, если прямоугольник, то и картинка должна быть прямоугольной.
Покрыть все варианты не получится.
Но судя по скрину в вопросе способ подойдет.