Задать вопрос
@Sergey_Afonin
css

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

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

Заранее спасибо)
  • Вопрос задан
  • 173 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
Stalker_RED
@Stalker_RED
Сделать контейнеры для иконок шириной 110, выровнять иконку и текст по центру.
Ответ написан
2 комментария
2 комментария
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Как сверстать данный список/таблицу из иконок и подписей под ними.

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Ещё заказы