एचटीएमएल में एक छवि के बगल में लंबवत केंद्र पाठ का सबसे अच्छा और आसान तरीका क्या है? ब्राउज़र संस्करण/प्रकार अज्ञेयवादी होने की आवश्यकता है। एक शुद्ध एचटीएमएल/सीएसएस समाधान।एचटीएमएल/सीएसएस में किसी छवि के बगल में मैं लंबवत केंद्र टेक्स्ट कैसे करूं?
मैं हमेशा this solution पर वापस आते हैं। बहुत हैक-आश नहीं है और काम पूरा हो जाता है।
संपादित करें: मुझे यह इंगित करना चाहिए कि आप निम्न कोड के साथ इच्छित प्रभाव प्राप्त कर सकते हैं (इनलाइन शैलियों को क्षमा करें; वे एक अलग चादर में होना चाहिए)। ऐसा लगता है कि किसी छवि (बेसलाइन) पर डिफ़ॉल्ट संरेखण टेक्स्ट को बेसलाइन पर संरेखित कर देगा; यह निर्धारित करने के लिए कि बीच में चीजें अच्छी तरह से प्रस्तुत करने के लिए मिलती हैं, कम से कम फ़ायरफ़ॉक्स 3.
<div>
<img src="http://stackoverflow.com/content/img/so/logo.png" style="vertical-align: middle;"/>
<span style="vertical-align: middle;">Here is some text.</span>
</div>
दिमाग में आने वाला एक मूल तरीका आइटम को एक टेबल में रखना होगा और दो कोशिकाओं, एक पाठ के साथ, दूसरा छवि के साथ, और शैली = "valign: center" टैग के साथ उपयोग करना होगा ।
"valign" सीएसएस में मौजूद नहीं है। आपने 'शैली = "लंबवत-संरेखण के साथ html' valign = "center" 'मिश्रित किया है: मध्य" ' – etuardu
यह एक मजेदार है। यदि आप टेक्स्ट के कंटेनर की ऊंचाई से पहले जानते हैं, तो आप उस ऊंचाई के बराबर रेखा-ऊंचाई का उपयोग कर सकते हैं, और इसे टेक्स्ट को लंबवत रूप से केंद्रित करना चाहिए।
मेरे 'span' की' रेखा-ऊंचाई 'को' img' के बराबर 'सेट करने के लिए इसे पूरी तरह से रेखांकित किया गया है। –
तरीके से कर रहे हैं: छवि टैग की विशेषता align = "absmiddle" का प्रयोग करें या किसी तालिका में छवि और एक कंटेनर DIV या टीडी में पाठ का पता लगाने और प्रयोग
style="vertical-align:middle"
खूबसूरती से सरल! +5 – luchonacho
मेरा पसंदीदा विकल्प पहला होगा, यदि यह एक छोटी सी जगह है, या बाद में अन्यथा।
क्या "शुद्ध HTML/CSS" टेबल के उपयोग को बाहर करता है? क्योंकि वे आसानी से आप क्या चाहते हैं क्या करेंगे:
<table>
<tr>
<td valign="top"><img src="myImage.jpg" alt="" /></td>
<td valign="middle">This is my text!</td>
</tr>
</table>
लौ मुझे सब आप की तरह है, लेकिन यह काम करता है (और पुराने, janky ब्राउज़रों में काम करता है)।
कोई चिंता नहीं। लेकिन मैं टेबल आधारित समाधानों को अनदेखा करने जा रहा हूं। ;) – LordHits
+1 टेबल आधारित समाधान का प्रस्ताव देने के लिए साहसी के लिए +1 :-) –
आपको अग्नि-श्वास सीएसएस ड्रेगन से डर नहीं है। –
मैं <td valign="middle"> (रूप inkedmn उल्लेख किया है, यह सभी ब्राउज़रों में काम करता है) के साथ तालिकाओं का उपयोग की सलाह देते हैं, लेकिन अगर आप एक लिंक के साथ लपेटकर कर रहे हैं, यहाँ इसे कैसे करना है (बहुत बदसूरत पुराने ब्राउज़रों में काम करता है, ओपेरा 9 की तरह):
<a href="/" style="display: block; vertical-align: middle;">
<img src="/logo.png" style="vertical-align: middle;"/>
<span style="vertical-align: middle;">Sample text</span>
</a>
यह काम करता है। धन्यवाद। एक अवलोकन हालांकि स्टाइल विशेषता पर आपके पास है। अगर मैं इसे हटा देता हूं, तो यह दृश्यमान रूप से कुछ भी नहीं दिखता है (FF3.0.10 और IE7 में)। अभी भी इसकी जरूरत है? – LordHits
हां। सीएसएस में वर्टिकल संरेखण वास्तव में इसके विपरीत काम करता है कि आप यह कैसे सोचते हैं: माता-पिता तत्व को अपने सभी बच्चों को लंबवत रूप से संरेखित करने के बजाय व्यक्तिगत तत्वों को अभिभावक तत्व के भीतर लंबवत रूप से गठबंधन किया जाना चाहिए (जैसे हम एक तालिका कक्ष में करेंगे)। – ajm
दुर्भाग्य से यह काम नहीं करता है अगर पाठ लपेटता है।केवल पहली पंक्ति केंद्रित है, अन्य छवि के नीचे बहती हैं (छवि के दाईं ओर सभी को केंद्रित, लपेटा हुआ है)। http://jsfiddle.net/vPpD4/ – Spongman