Часто бывает так, что нужно сделать стиль ненумерованного списка не подходит под дизайн страницы, и тогда используется list-style-image, который позволяет сделать так, чтобы вместо точки/диска/квадратика выводилась произвольная картинка. Но частенько, эта картинка позиционируется не правильно, особенно, если она чуть больше, чем размер обычной точки для списка. Картинка сползает по-вертикали, из-за чего все манипуляции выглядять не очень разумными. Поэтому в этой статье рассмотрим как сделать на CSS list-style-image выравнивание по-вертикали.

Первое решение, которое не работает

Первое, что приходит на ум в сиутации с не правильным выравниванием иконки по-вертикали, это попробовать изменить line-height у li (элемента списка), так, чтобы сдвинуть иконку списка относительно базовой линии текста элемента списка.

Но, как показала практика, этот подход не срабатывает.

Поэтому предлагаем вашему вниманию, действительно рабочий способ, который легко применить, даже после завершения верстки сайта, то есть не нужно будет вырезать новые картинки, что-то выдумывать и прыгать с бубном. Достаточно будет даже сделать примитивную подмену старого кода на новый по всем местам, где используется list-style-image, с помощью того же Sublime Text, например. Но мы сегодня не об этом, а о выравнивании.

CSS list-style-image выравнивание по-вертикали

Самый действенный способ сделать на CSS list-style-image выравнивание по-вертикали – это изменить к нему подход.

Вместо того, чтобы изпользовать list-style-image, напрочь скрываем все иконки, точки или квадратики. Просто берем и скрываем с помощью list-style: none.

А где же иконка? Очень просто, относительно каждого элемента списка создаём псевдо-элемент :before, у которого задаём content, background-image, width и height. Всё. Его даже позиционировать не надо, элемент :before по-умолчанию является частью строки родителя, и будет хорошо позиционирован в большинстве случаев относительно текста элемента списка.

Теперь немного кода, чтобы проиллюстрировать

li{
list-style: none;
}

li:before{
content: "";
width: 16px;
height: 16px;
background: url('path_to_icon.png');
}

Как понимаете, если иконка размером 16х16, то вместо точки в списке будет выводится эта иконка без проблем (если она больше/меньше – измените width и height, они должны соответствовать размерам иконки). Также в зависимости от ситуации и дизайна, можно задавать другие свойства :before, например правый отступ margin-right, чтобы сделать отступ от иконки списка до текста элемента списка.

Как бы то ни было, если вы развиваете свой бизнес в интернете, то рекомендуем обратить внимание на сервис Zenlink (по ссылке). Это сервис естественного продвижения сайтов, который позволяет повысить позиции сайта в поисковой выдаче и при этом не попасть под санкции поисковиков (профит).