सीएसएस: प्रत्येक सूची तत्व से पहले संख्याओं/गोलियों को लंबवत रूप से संरेखित करने का कोई तरीका है?

Question

मैं एक क्रमांकित सूची बनाने का प्रयास कर रहा हूं जहां प्रत्येक li तत्व में एक छवि और एक टेक्स्ट ब्लॉक होता है। सूची-संख्या, छवि और टेक्स्ट ब्लॉक को क्षैतिज केंद्र-रेखा के साथ लंबवत रूप से गठबंधन किया जाना चाहिए। टेक्स्ट ब्लॉक कई लाइनें हो सकती है। यहाँ एक बहुत ही किसी न किसी उदाहरण दिया गया है:

निकटतम मैं हासिल कर लिया है निम्नलिखित है, जो नीचे (Chrome 15, Firefox 8, IE9 में परीक्षण) पर सूची संख्या संरेखित करता है। jsfiddle mockup भी देखें।

<style type="text/css"> 
    li div { display: inline-block } 
    li div div { display: table-cell; vertical-align: middle } 
</style> 

<ol> 
<li><div><div><img src=widget.png></div><div>Caption Text Here</div></div></li> 
</ol> 

क्या नंबरिंग की आपूर्ति किए बिना ऐसा करने का एक क्रॉस-प्लेटफार्म तरीका है?

संपादित करें। एक और आवश्यकता: यदि कंटेनर-चौड़ाई बहुत छोटी है (उदा।, जब मोबाइल डिवाइस पर देखा जाता है), तो टेक्स्ट-ब्लॉक छवि के दाईं ओर रहना चाहिए। छवि के चारों ओर कोई पाठ-लपेटना नहीं होना चाहिए।

Answer 1

हम्म, यह वास्तव में हासिल करना बहुत मुश्किल नहीं होना चाहिए। बस सुनिश्चित करें कि आपके सभी तत्व लंबवत-मध्य में गठबंधन हैं।

HTML:

<ol> 
    <li><img src="widget.png" alt /> <p>Caption Text Here</p></li> 
</ol>  

सीएसएस:

ol { 
    white-space: nowrap; 
    padding: 0 40px; } 
li img { 
    vertical-align: middle; 
    display: inline-block; } 
li p { 
    white-space: normal; 
    vertical-align: middle; 
    display: inline-block; } 

पूर्वावलोकन: http://jsfiddle.net/Wexcode/uGuD8/1/

ऑटो चौड़ाई बहु लाइन पाठ ब्लॉक के साथ

: http://jsfiddle.net/Wexcode/uGuD8/

बहु लाइन पाठ ब्लॉक के साथ

: http://jsfiddle.net/Wexcode/uGuD8/11/