Wyrównywanie list-style-image proporcjonalnie z tekstem

Question

Więc mam

<ul> 
    <li>Hello</li> 
</ul> 

i

li { 
    list-style-image: url(../img/bullet.png); /* 13x13 px */ 
    /* line-height: 13px; */ 
    /* vertical-align: middle; */ 
    padding-left: 5px; 
} 

która wygląda jak

jak widać tekstowy i obrazowy elementu z <li> nie są wyrównane w pionie (obraz jest wyższy niż tekst), Próbowałem zastosować wysokość linii i wyrównanie do niej w pionie (skomentował kod), ale to się nie udało. Czy istnieje sposób na osiągnięcie dobrego wyrównania?

Answer 1

Wypełnienie będzie dotyczyło tylko tego, co znajduje się wewnątrz elementu - tekstu, w twoim przypadku.

Jedyna nieruchomość Regulacja pozycji dostępna jest list-style-position, ale jedynymi dopuszczalnymi wartościami są inherit, inside lub outside. Najczęstszą praktyką jest stosowanie:

list-style: none; 

a następnie zastosować żądany obraz jako <li> „s tle

li { 
    /** the image will be vertically aligned in the center **/ 
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/ 
    padding-left: 20px; 
} 

Answer 2

Kiedy masz tylko jedną linię za element listy można dodać kilka padding-bottom do elementu

Answer 3

li może określić img-tag lub background: url (..) dla Li-tag zamiast " list-style-image "

Answer 4

Musiałem także dodać«no-repeat»do właściwości tła

Answer 5

można mieć

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