Как вы вертикально центрируете пользовательское изображение в элементе <li>в браузерах?

Question

Дизайн для сайта Я работаю над вызовами для пользовательских изображений в списках вместо маркера. Использование изображения - это нормально, но у меня были трудности с обеспечением того, чтобы оно было отцентрировано по тексту элемента списка во всех браузерах. Кто-нибудь знает стандартное решение для этого?

Answer 1

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

ul li {
  background: transparent url(/link/to/custom/bullet.gif) no-repeat 0 50%; 
  padding-left: 18px; 
}

Единственная проблема в том, что иногда для длинных многострочных элементов списка это выглядит странно. В этом случае может быть лучше назначить фоновую позицию небольшому отступу сверху и слева (то есть без повтора 0 7px).

ура, Брюс

Answer 2

установить конкретную высоту строки на элементе li и выравнивание вертикали на изображении .. работает для меня

li { height: 150px; line-height: 150px; }
li img { vertical-align: middle; }

и HTML-код

<li><img src="myimage.jpg" /></li>

, если вы хотите адаптировать изображение к размеру custon, сохраняя соотношение

li img { max-width: 150px; max-height: 150px; width: auto; height: auto; }

Answer 3

Вы пытались добавить следующий код в свой файл CSS?

li
{
   background-image: URL('custom.png');
   background-repeat: no-repeat;
   background-position: center;
}