allineamento list-style-immagine in modo proporzionale con testo

Question

così ho

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

e

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

che assomiglia

come si può vedere il testo e immagine Elemento di <li> non sono allineati verticalmente (l'immagine è più alta del testo), Ho provato ad applicare line-height e vertical-align ad esso (codice commentato), ma non lo ha nemmeno fatto. C'è un modo per ottenere un buon allineamento?

Answer 1

Il padding interesserà solo ciò che è all'interno dell'elemento, il testo, nel tuo caso.

L'unica proprietà di regolazione della posizione disponibile è list-style-position, ma gli unici valori consentiti sono inherit, inside o outside. La pratica più comune è quello di utilizzare:

list-style: none; 

e quindi applicare l'immagine desiderata come sfondo 's il <li>

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

Quando si dispone di una sola linea per ogni elemento della lista si può aggiungere un po 'padding-bottom al li elemento

Answer 3

può definire un img-tag o un'immagine di sfondo: url (..) per la li-tag al posto del " list-style-image "

Answer 4

Ho anche bisogno di aggiungere "no-repeat" per la proprietà background

Answer 5

si può avere

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