Как сверстать такой блок?

Question

[Август Милович]

Здраствуйте! Хотелось бы спросить, как сверстать блок, что на картинке ниже. Сложность с том, что заголовки не отталкиваются от картинок как попало, а идут в одну ровную линию. А картинки то разных размеров. Я создавал блоки, делал им ширину и высоту максимально широкой и высокой картинки, и позиционировал этот фон по центру относительно блоков, а от блоков отталкивались заголовки уже ровно. Но хотелось бы, чтобы верстка не зависела от размеров картинки, вдруг надо будет поменять картинку на другую, а она окажется больше. Вобщем как то так. Заранее всем спасибо)

Answer 1

[Dima Polos]

Чтобы текст был на одной линии есть свойство для флексов align-items: baseline.
https://codepen.io/dimovich85/pen/bJdypd

Comments

[Август Милович]

Так, мне это начинает нравится, только как картинки по центру выровнять теперь?

[Dima Polos]

Август Милович, немного поменял структуру, можно так:
https://codepen.io/dimovich85/pen/ZZGdbM

[Dima Polos]

Август Милович, Вам в любом случае в такой блок надо подбирать картинки приблизительно одного размера, если на движке это дело будет, то движок будет их обрезать автоматически, или заранее будут картинки нужных размеров приходить. Если речь идет о каких-то +\- размерах, то чтоб все ровно было можно сделать так, но блоку с картинкой надо задать высоту жестко, по макету, и еще бы хорошо overflow: hidden, чтоб не вылезала на всякий случай.

[Август Милович]

Dima Polos, Вот спасибо тебе огромное, сильно помог)

[Dima Polos]

Август Милович, был рад:)