लंबवत संरेखण आईएमजी और ली

Question

के भीतर पाठ मैं एक सूची तत्व के भीतर एक छवि और कुछ पाठ दोनों के बीच लंबवत संरेखित करने की कोशिश कर रहा हूं लेकिन कोई भाग्य नहीं है।

जैसे:

<ul> 
<li><img src="somepath" /> sometext 
    </li> 
<li><img src="somepath2" /> sometext2 
    </li> 
</ul> 

कैसे मैं यह कर सकता है? धन्यवाद

Answer 1

मान लें कि आपकी सूची वस्तुओं की एक निश्चित ऊंचाई है, आप line-height का उपयोग vertical-align: middle के साथ संयुक्त करने के लिए कर सकते हैं।

उदाहरण:

ul li { 
    display: block; 
    height: 100px; 
    line-height: 100px; 
} 

ul li img { 
    vertical-align: middle; 
} 

Working example here.

Answer 2

आप img टैग के लिए सीएसएस संपत्ति "ऊर्ध्वाधर- align" का उपयोग करने में सक्षम होना चाहिए। उदाहरण:

<style type="text/css"> 
    img { vertical-align: middle; } 
</style> 
<ul> 
    <li><img src="test.jpg" />test</li> 
</ul> 

Answer 3

आप छवि की ऊंचाई पता है (यह मानते हुए यह एक प्रतीक है), तो आप छवि की ऊंचाई तक लाइन ऊंचाई सेट कर सकते हैं। फिर इसे vertical-align:middle सेट करके काम करना चाहिए। W3Schools से कम एक जीवित उदाहरण देखें: http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align

Answer 4

आप "ली"

<li><div><span>My text</span></div></li> 

li div{ 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
li span{ 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 5

भीतर पाठ लपेट चाहिए ऊपर जवाब है कि खड़ी केंद्रित के लिए line-height विधि का सुझाव से इसे जारी रखते हुए। यदि आप ऐसे फ़ॉन्ट को लागू करते हैं जिसमें ग्लिफ हैं जो फ़ॉन्ट फ़ाइल में लंबवत केंद्रित नहीं हैं तो परिणाम यह होगा कि आपका तत्व लंबवत रूप से केंद्रित नहीं होगा, लेकिन इसके ऊपर उच्च या कम होना चाहिए।

मुझे यह समस्या थी और काम करने में मुश्किल थी। यदि आपका तत्व लंबवत रूप से संरेखित नहीं होता है और आप काम नहीं कर सकते हैं, तो 'एरियल' जैसे मानक फ़ॉन्ट को लागू करने का प्रयास करें।

See here for more information.