Список вертикального выравнивания текста в середине со списком-образ-образ

Я пытаюсь вертикально выровнять некоторый текст внутри списка li и иметь проблемы. Прежде всего вам нужно знать, что я заменил свой стиль в стиле списка с помощью настраиваемого образа. Это мой CSS:

ul.cogs li { 
    list-style-image: url(Images/li_cog.png); 
    height: 50px; 
    line-height: 50px; 
}

Я попытался понять, есть ли способ получить текст для выравнивания по середине. Я пробовал:

vertical-align: middle;

который не работал, поэтому я попробовал:

line-height: 50px;

который также не работал, поэтому я попробовал:

display: table

который работал, но изображение исчезает из элемента списка....

Кто-нибудь знает, как заставить это работать?

Ответы

Ответ 1

Проблема с использованием list-style-image заключается в том, что вы не можете выровнять текст, лучше всего использовать элемент background-image для li, а затем используйте padding-left для ваших li элементов.

Багги-демонстрация (проблема, с которой вы сталкиваетесь)

Демо

ul li {
    background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
}

ul {
    margin: 50px;
}

Ответ 2

у вас может быть

<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>

Ответ 3

Как насчет

ul.cogs li {
    list-style-image: url(Images/li_cog.png); 
    height: 50px; 
    line-height: 50px;  
    position: relative;
}

ul li span {
    position: absolute;
    top: (x)px;
    left: (x)px;
}