Dikey olarak tek ve çok satırlı li metin merkezi

Question

Arka plan görüntüsü kümesine sahip sırasız bir listem var. Tüm liste öğeleri aynı yüksekliğe sahip, arka plan görüntüsü sol merkezde konumlandırılmıştır.

Her bir öğenin metninin, , dikey olarak için ortalanmış olması gerekir. Bu, tek satırlı metinle (satır yüksekliğini li'nin yüksekliğine göre ayarlayarak) iyi çalışır, ancak iki satırlık metinle.

İki satırlı öğeye "satır yüksekliği: normal" ekleyebilirim, ancak tüm öğeler için uygun bir çözüm istiyorum.

Bunu nasıl yapabilirim?

Örnek:

li { 
    list-style-type:none; 
    padding-left:40px; 
    height:36px; 
    line-height:36px; 
    background:url('tick.png') no-repeat 0 50%; 
} 

Answer 1

görmek için güncellenmiş bu ben kısalık için kesmek yıldızı kullanılan bir çoğu crossbrowser çözüm

li { 
    width   : 200px; 
    line-height  : 100px; 
    height   : 100px; 
    border   : 1px blue solid;   
} 
li span { 
    display    : -moz-inline-box; /* FF2 or lower */ 
    display    : inline-block;  /* FF3, Opera, Safari */ 
    line-height   : normal; 
    vertical-align  : middle;  
} 

li span  { *display : inline;} /* haslayout for IE6/7 */ 

html

<ul> 
    <li><span>My text</span></li> 
    <li><span>My longer text</span></li> 
    <li><span>My text, but this time is really wide</span></li> 
    <li><span>My text, some thoughts about how much it will expand in this item.</span></li> 
</ul> 

, sen kaçınmalısınız. Sadece html5boilerplate çözümünü kullan, beden etiketindeki koşullu yorumları kullanır

Answer 2

li { 
    height:200px; 
    line-height:200px; 
    border:1px solid red; 
} 
li span { 
    vertical-align:middle; 
    display:inline-block; 
    line-height:1.2; 
} 

<li> 
    <span>two<br />lines</span> 
</li> 

O çalışmalıdır.

DÜZENLEME: Değişiklikleri