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






Вы пробовали добавить следующий код в свой файл CSS?
li
{
background-image: URL('custom.png');
background-repeat: no-repeat;
background-position: center;
}
Если вы имеете в виду использование настраиваемого маркера изображений для своего списка, это код, который вы захотите использовать, он будет центрирован по вертикали. Я предполагаю, что изображение пули имеет размер 12 на 12 пикселей.
ul li {
background: transparent url(/link/to/custom/bullet.gif) no-repeat 0 50%;
padding-left: 18px;
}
Единственная проблема заключается в том, что иногда в длинных многострочных списках это выглядит странно. В этом случае лучше всего назначить положение фона небольшим отступом сверху и слева (т.е. без повтора 0 7 пикселей).
ура, Брюс
установите определенную высоту строки для элемента li и вертикальное выравнивание изображения .. сработало для меня
li { height: 150px; line-height: 150px; }
li img { vertical-align: middle; }
и HTML-код
<li><img src = "myimage.jpg" /></li>
если вы хотите адаптировать изображение к нестандартному размеру, сохранив соотношение
li img { max-width: 150px; max-height: 150px; width: auto; height: auto; }
Пользовательский маркер не является фоновым изображением элемента li.