केंद्र एकल- और बहु-लाइन ली टेक्स्ट लंबवत

Question

मेरे पास पृष्ठभूमि-छवि सेट के साथ एक अनियमित सूची है। सभी सूची-वस्तुओं में समान ऊंचाई होती है, पृष्ठभूमि-छवि बाईं ओर स्थित होती है।

प्रत्येक आइटम का पाठ को लंबवत पर केंद्रित होना चाहिए। यह सिंगल-लाइन टेक्स्ट (ली की ऊंचाई के अनुसार लाइन-ऊंचाई सेट करके) के साथ अच्छी तरह से काम करता है, लेकिन के साथ टेक्स्ट की दो पंक्तियां नहीं हैं।

मैं दो पंक्ति वस्तु में "रेखा-ऊंचाई: सामान्य" जोड़ सकता हूं, लेकिन मुझे एक समाधान चाहिए जो सभी वस्तुओं के लिए काम करता है।

मैं यह कैसे कर सकता हूं?

उदाहरण:

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

Answer 1

देखने के लिए अद्यतन यह एक सबसे crossbrowser समाधान

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 */ 

एचटीएमएल

<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> 

मैं स्टार इस्तेमाल किया संक्षिप्तता के लिए हैक है, तो आप से बचना चाहिए। बस html5boilerplate समाधान का उपयोग करें, यह शरीर टैग

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> 

यह काम करना चाहिए।

संपादित करें: परिवर्तन