Как отдалить текста от картинки на равные расстояния, если изображения разного размера?

Question

[Никита Степанов]

Нарисовал линию по которой должны выстроиться текста, но из за того, что картинки разной ширины - marginом не получается правильно отдалить, а если делать marginом, то это уже будут кастели конкретные, можно ли каким то другим путём отдалить?

Comments

[Ankhena]

Картинки-то разные, но псевдоэлементы (надеюсь, что у вас там не img в разметке) никто не мешает сделать одинаковыми. Это раз.

Или вы можете прибить их абсолютами (но тоже не очень удобно, если размеры псевдо разные). И задать отступ тексту или родителю.

Или можно использовать гриды. Но придется указать ширину первой ячейки в чем-то более жестком чем min-content/.

Answer 1

[vlurtex]

Попробуй изо запихнуть в дивы одинаковой ширины и сделать между каждым изо и текст flex; space beetwen
А в самих дивах очевидно justify-contenst:cenetr; align-items:center;-

Comments

[Никита Степанов]

В итоге я просто сделал так: Ширину картинки подогнал под общую и отдалил общим марджином :D Всё вышло более менее неплохо. Твой способ тоже рабочий, но при адаптиве - плохо работает + не понимаю как отступ отредактировать под нужный.

[vlurtex]

Никита Степанов, Отлично, но флекс мне кажется лучше подходит под Responsive

Answer 2

[Евгений Залецкий]

Ну смотри, у тебя есть блок, в этом блоке ещё три блока, следовательно делаешь отступы у этих трёх блоках
margin 20px;
И у тебя будет отступ 20пх с каждой стороны.