hizalama list-style-image orantılı metin ile

Question

yüzden

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

ve bakar

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

var metin ve resim elemanı görebileceğiniz gibi

gibi <li>, dikey olarak hizalanmadı (resim metinden yüksek), Hat yüksekliğini ve dikey hizalamayı (kod açıkladı) kullanmayı denedim, ancak bunu yapmadı. İyi uyum sağlamanın bir yolu var mı?

Answer 1

Dolgu, yalnızca öğenin içinde olanı etkileyecektir - metin, sizin durumunuzda.

kullanılabilen tek konum ayarı özelliği list-style-position, ama sadece izin verilen değerler inherit, inside veya outside bulunmaktadır. En yaygın uygulama kullanmaktır:

list-style: none; 

ve sonra <li> 'ın arka

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

yalnızca liste öğesi başına bir satır varsa, bir img-etiketi veya bir arka plan tanımlamak Mayıs li eleman

Answer 3

bazı padding-bottom ekleyebilirsiniz: url (..) yerine li-etiket için " list-style-image "

Answer 4

Ben de arka plan özelliğine 'no-repeat' eklemek için gerekli istenen görüntüyü uygulamak

Answer 5

yardımcı olmadı,

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