Ausrichtungs list-style-Bild proportional mit Text

Question

So habe ich

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

und

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

die

wie

aussieht, wie Sie Text und Bildelement sehen von <li> sind nicht vertikal ausgerichtet (Bild ist höher als Text), Ich habe versucht, Zeilenhöhe und vertikale Ausrichtung darauf anzuwenden (Code auskommentiert), aber es hat es nicht ausgemacht. Gibt es eine Möglichkeit, eine gute Ausrichtung zu erreichen?

Answer 1

Die Auffüllung wirkt sich nur auf das aus, was sich innerhalb des Elements befindet - in Ihrem Fall der Text.

Die einzige verfügbare Positionseinstellungseigenschaft ist list-style-position, aber die einzigen zulässigen Werte sind inherit, inside oder outside. Die am weitesten verbreitete Praxis ist zu verwenden:

list-style: none; 

und dann das gewünschte Bild anwenden, wie die <li> ‚s Hintergrund

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

Wenn Sie nur eine Zeile pro Listenelement haben Sie

Answer 3

Mai einen img-Tag oder einen Hintergrund definieren einig padding-bottom zum li Elemente hinzufügen: url (..) für den li-Tag statt dem " list-style-image "

Answer 4

ich auch auf den Hintergrund Eigenschaft hinzufügen‚no-repeat‘benötigt

Answer 5

können Sie haben

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