css3 - Image vertical align with css - strange -

मेरे पास निम्न कोड है:

  & lt; html & gt; & Lt; शीर्ष & gt; & Lt; शैली प्रकार = "टेक्स्ट / सीएसएस" & gt; # टेस्ट आईएमजी {ऊर्ध्वाधर-संरेखित करें: मध्यम;} div # test {border: 1px ठोस हरा; ऊंचाई: 150px; रेखा-ऊंचाई: 150px; पाठ संरेखित: केंद्र; रंग: सफेद} & lt; / style & gt; & Lt; / head & gt; & LT; बॉडी & gt; & Lt; div id = "test" & gt; t & lt; img वर्ग = "नीचे" src = "http://www.w3schools.com/css/w3schools_logo.gif" alt = "W3Schools" width = "270" height = " 50 "/> gt; & lt; / div & gt; & Lt; / body & gt; & Lt; / html & gt;  

अगर मैं छवि के बाद t हटाता हूं, तो यह केंद्र में खड़ी नहीं है (मैं इसे फ़ायरफ़ॉक्स में परीक्षण करता हूं)। जैसा कि अब यह संरेखण होता है, इसलिए मैं पाठ का रंग पृष्ठभूमि या किसी अन्य तरीके से एक इनलाइन शैली डालने के लिए और पृष्ठभूमि के रूप में सेट कर सकता था।

क्या सीएसएस के साथ एक छवि खड़ी करने के लिए कोई अन्य तरीका है? मैं एक हैक का एक सा होने के इन तरीकों को मिला। कि कैसे CSS3 में काम किया है?

कारण यह है कि t एक diffence बनाता है, क्योंकि छवियों का इलाज किया जाता है अलग-अलग अगर वे एकमात्र तत्व हैं, या यदि वे एक पाठ का हिस्सा हैं।

छवियों को पृष्ठ के रेंडरिंग मोड पर निर्भर करते हुए एक तत्व के रूप में कैसे माना जाता है। प्रारंभिक छवियों में एकल तत्वों को ब्लॉक तत्वों के रूप में माना जाता था, और यह व्यवहार कुछ विशिष्ट स्थानों में पीछे की ओर संगत होने के लिए बनाए रखा जाता है। आपको पृष्ठ पर एक डाल देना चाहिए, ताकि इसे क्वार्कक्स मोड में रेंडर न किया गया हो, अगर यह आपकी समस्या का समाधान नहीं करता है, तो कम से कम यह इसे और अधिक लगातार व्यवहार करेगा।