Есть ли способ организовать выравнивание элементов списка (LI) при использовании изображения в качестве маркера?

Question

У меня есть следующий CSS

.ul{
    list-style-image:url(/images/bullet.png)
}

Мой bullet.png имеет размер 20 x 20 пикселей, однако он отображает текст внизу изображения, в то время как мне нужно отобразить текст в середине изображения. Есть ли способ назначить поля и отступы, которые перемещают только текст?

Answer 1

Сброс отступов и полей.

Используйте свойство background-image и установите отступ для размера изображения (и больше, если вы хотите, чтобы между маркером и текстом было свободное пространство)

li
{
  margin: 0;
  padding: 0 20px 0 0;
  background-image:url(/images/bullet.png);
  background-repeat: no-repeat;
}

Answer 2

Не совсем. Вы можете попробовать удалить маркеры, наложить отступы на LI и выровнять фоновое изображение по левому и по центру: background: url(images/bullet.png) no-repeat left center;.