लाइन पर लंबवत रूप से केंद्र छवियों को कैसे करें?

छवियों को लाइन ऊंचाई से छोटे होने पर लाइन पर केंद्र आइकन करने का सबसे अच्छा तरीका क्या है?लाइन पर लंबवत रूप से केंद्र छवियों को कैसे करें?

उदाहरण के लिए (इनलाइन आसानी से पढ़ने के लिए शैलियों):

<div style="line-height: 20px"> 
    <img style="width: 12px; height: 12px;"/> 
    Blah blah blah 
</div>

Here's a jsFiddle example। यह उदाहरण भी दिखाता है कि क्यों vertical-align: middle काम नहीं करता है।

मैं चाहता हूं कि आईएमजी div के पाठ के खिलाफ केंद्रित हो। यही है, भले ही पाठ कई पंक्तियों में लपेटा गया हो, फिर भी छवि एक पंक्ति के खिलाफ केंद्रित होगी। आदर्श रूप से, समाधान में छवि पर सेटिंग मार्जिंग/पैडिंग शामिल नहीं होंगे और अगर मैं रेखा-ऊंचाई को नहीं जानता तो भी काम करेगा।

चीजें मैं पढ़ा है:

How do I vertically align text next to an image with CSS?

Understanding vertical-align

स्रोत

2010-06-15 Jeremy Kauffman

आपके द्वारा संदर्भित लिंक में निर्दिष्ट समाधान के साथ क्या गलत है? '' का उपयोग करना समान रूप से अच्छी तरह से काम करना चाहिए जब छवि लाइन-ऊंचाई से छोटी हो। –

मुझे यहां कुछ याद आ रहा है, लेकिन जो आपने देखा है वह लंबवत रूप से संरेखित है: 'http: // jsfiddle.net/JrFkE /' – edl

मैंने एक पहेली जोड़ दी जो इन दोनों दृष्टिकोणों के साथ मुद्दों को दिखाती है। –

आपकी समस्या का कारण यह है कि छवि लंबवत पाठ के x-height के सापेक्ष केंद्रित है। यह एक बढ़े हुए स्क्रीनशॉट पर काफी स्पष्ट रूप से देखा जा सकता है जहां baseline और आसपास के पाठ की mean line शामिल है:

illustration of a vertically aligned image compared to the surrounding text's baseline and mean line

छवि इसी तरह कोई फर्क नहीं पड़ता जो फ़ॉन्ट आकार या लाइन ऊंचाई आप का उपयोग गठबंधन है। तो, एक टाइपोग्राफ़िकल अर्थ में, छवि वास्तव में सही ढंग से लंबवत गठबंधन है। हालांकि, अगर आप संरेखण समायोजित करने के लिए इतना है कि छवि के केन्द्र मतलब लाइन के करीब है चाहते हैं, बस इसे थोड़ा ऊपर की तरफ margin-bottom का उपयोग कर ले जाने:

img.icon { 
    margin-bottom: 0.25em; 
}

0,25 का मूल्य उन्हें नहीं बल्कि मनमाने ढंग से चुना जाता है , जब मैंने कोशिश की तो क्या अच्छा लगा। स्वाद के अनुसार स्वतंत्र रूप से समायोजित करें।

विभिन्न फ़ॉन्ट आकारों के साथ a comparison before and after the margin-adjustment है।

स्रोत

2010-06-15 20:10:51

+1 मैं हमेशा इस समस्या में फंस गया हूं (टेक्स्ट के साथ इनलाइन छवियां)। यह एक असली समाधान है। Thanx @Wieslander – shashwat

पूरक: img लंबवत-संरेखण होना चाहिए: नीचे, और विलय-नीचे: (रेखा-ऊंचाई - छवि ऊंचाई)/2 – linjunhalida

आप के रूप में छवि क्यों निर्धारित नहीं करते हैं (सौदों मामले में जहां छवि बड़ा है के साथ, यहाँ लागू करने के लिए प्रतीत नहीं होता है) div तत्व की पृष्ठभूमि? आईई .:

<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;"> 
    Blah blah blah 
</div>

यह शीर्ष बाईं ओर छवि को स्थान देगा। कम से कम मैं ऐसा करूंगा।

सादर

स्रोत

2010-06-15 18:53:36

कोई बुरा विचार नहीं है, लेकिन इस मामले में छवियां वास्तव में sprites (उदाहरण के लिए जैसे कुछ img टैग की बजाय हैं, इसलिए यह काम नहीं करेगी। –

@ जेरेमी: फिर आप अपने प्रश्न में 'img' टैग का उपयोग क्यों करते हैं? – jeroen

सरलीकरण।इस समाधान को दूरी को मैन्युअल रूप से सेट करने की भी आवश्यकता है, जिसे मैं टालने की उम्मीद कर रहा था। यदि मैं टेक्स्ट आकार या रेखा ऊंचाई बदलता हूं, तो मुझे छवि स्थिति को समायोजित करने की आवश्यकता है। –

कोशिश माता पिता कंटेनर display: table और display: table-cell बनाने के लिए। उसके बाद vertical-align: middle "टेबल वे" में काम करना चाहिए।

स्रोत

2010-06-15 19:19:30 vtambourine

यह आईई 7 और इससे पहले काम नहीं करता है, जो दुर्भाग्यवश अभी भी मौजूद है। –

लाइन पर लंबवत रूप से केंद्र छवियों को कैसे करें?

उत्तर

संबंधित मुद्दे