Как сверстать данный список/таблицу?

Question

[Sergey_Afonin]

Как сверстать данный список/таблицу из иконок и подписей под ними.
Расстояние между всеми иконками (нижними и соседними) 110px.
Как видите, у каждой иконки текст разного размера, он выходит за границы и по этому другие иконки съезжают или же текст сжимается.
Мне нужно что бы результат был как на макете.

Заранее спасибо)

Comments

[tema_sun]

Ваш код где?

Answer 1

[Stalker_RED]

Сделать контейнеры для иконок шириной 110, выровнять иконку и текст по центру.

Comments

[Sergey_Afonin]

оно то вроде как сработало, но в респонсиве как быть?

[Odisseya]

М@Sergey_Afonin, медиазапросами перестроить width-блоков из px в %, добавить min/max-width. Смотрим как заданные в процентах блоки будут вести себя на разных разрешениях и проставляем контрольные точки.

Answer 2

[Ankhena]

Как сверстать данный список/таблицу из иконок и подписей под ними.

<figure>Используется для группирования любых элементов, например, изображений и подписей к ним. не должен быть связан непосредственно с основным содержимым документа и при его перемещении в другое место смысл текста не должен меняться. Обычно применяется для иллюстраций, фрагментов кода, схем, графиков, диаграмм и др.
Для подписей используется тег <figcaption>
https://webref.ru/html/figure
https://webref.ru/html/figcaption

Делаете блоки нужной ширины и выравниваете в них содержимое по центру.
Используете flex.

Мне нужно что бы результат был как на макете.

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