CSS list-style-image

Question

Ich habe ein Problem mit CSS-List-style-image-Tag meine Liste Bild ist etwas, was groß ist, und der Text hinter es wird auf den unteren Teil des style-Tags gedrückt, gibt es eine befestigen Sie es wieder in der Mitte

es das ist zu wenig jetzt wie:

 
| 
| 
| here 

und ich sein will:

 
| 
| here 
| 

Answer 1

Ihre Frage ein wenig unklar, aber es klingt wie Sie Vielleicht müssen Sie Hintergrundbilder betrachten r Ather als (oder zu ergänzen) List-Stil-Bilder.

Answer 2

Erhöhen Sie einfach die Zeilenhöhe der betreffenden li-Elemente.

#iconlist li { 
    line-height: 2em; 
} 

Auch, wie keithjgrant vorgeschlagen, würde ich stattdessen Hintergrundbilder verwenden. List-Images sind in verschiedenen Browsern eher uneinheitlich positioniert. So etwas wie folgt verwenden:

#iconlist li { 
    padding-left: 22px; 
    background: url(20x20-icon.png) left center no-repeat; 
    line-height: 22px; 
    list-style: none; 
} 

Answer 3

Die einzige realistische Weg, dies zu erreichen ist mit background-image:

ul li { 
    background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;; 
    list-style-position: outside; 
    padding-left: 250px; 
    line-height: 160px; /* vertical height of image */ 
} 

JS Fiddle demo.

Dies ist jedoch fail badly if the text of the li wraps to a second (or third) line.

Answer 4

Versuchen vertical-align: middle; (css)

Answer 5

Vergessen Sie die Liste Stil Bildeinstellung und verwenden Sie die folgende CSS ...

ul#example li { 
    list-style-type: none; 
} 

/* create new marker */ 
ul#example li:before { 
    display: marker; 
    content: url("new_marker.png"); 
    /* set the following to fit your needs */ 
    vertical-align: 3px; 
    padding-left: 2px; 
    padding-right: 12px; 
} 

Notiere die vertikale align Stil, legen Sie es Zahlen minus Text nach oben zu schieben.

Source of answer.