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

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

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

Как правильно выровнять иконку относительно текста и текст относительно блока?
  • Вопрос задан
  • 3782 просмотра
Решения вопроса 1
Geminic
@Geminic
В этом случае я бы добавил отдельный элемент для иконки, так будет универсальнее. А вот для стрелочек справа лучше использовать :after, потому что они одинаковые.

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

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

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

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

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