Задать вопрос

Как правильно сверстать вертикальное меню с иконками?

Пример меню:
20150221-8c9g-43kb.jpg

Собственно интересует как сделать лучше, добавлять отдельный эллемент / с классом для иконки, или лучше с before?

Как правильно выровнять иконку относительно текста и текст относительно блока?
  • Вопрос задан
  • 3800 просмотров
Подписаться 10 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
Geminic
@Geminic
В этом случае я бы добавил отдельный элемент для иконки, так будет универсальнее. А вот для стрелочек справа лучше использовать :after, потому что они одинаковые.

Если текст в меню может быть только в одну строку, то можно отцентровать с помощью line-height. Иконки будут инлайн-блоками, поэтому тоже выровняются относительно центра. Если нужно будет подредактировать их смещение относительно центра, то можно использовать для иконок position: relative и top: 1px, например. Это сместит иконку, но на текст не повлияет.

Если текст может быть в две строки, то просто подберите значение верхнего и нижнего паддинга для строк. Иконки в этом случае можно центровать так:

position: absolute;
top: 50%;
margin-top: -8px /* половина высоты иконки */
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
А как же list-item-image?
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы