जब आपके पास दो इनलाइन तत्व होते हैं जो एक ही लाइन को साझा करते हैं, और एक बड़ा होता है vertical-align: baseline और छोटा एक है vertical-align: middle आधार रेखा तत्व के नीचे मध्य संरेखित तत्व क्यों दिखाई देता है?
मैं एक साथ एक डेमो प्रदर्शित कर रहा हूं, जो मैं बता रहा हूं: http://jsfiddle.net/mLSG2/
ऐसा प्रतीत होता है कि छोटा तत्व "मिड-लाइन" बड़े तत्वों के आधार रेखा से जुड़ा हुआ है, लेकिन यह मेरे लिए बहुत मायने नहीं रखता है। अगर यह सच है, तो इसके पीछे क्या तर्क है?
अधिक आम तौर पर, कोई समझा सकता है कि संरेखण कैसे होता हैजब अलग-अलग लाइन-हाइट्स और अलग-अलग वर्टीकल अलाइनमेंट डिक्लेरेशन के तत्वों की गणना की जाती है, तो उसी लाइन को साझा करें क्या कल्पना में कोई जगह है जो इसे परिभाषित करती है?
उत्तर:
उत्तर № 1 के लिए 1से विनिर्देश, vertical-align: middle बॉक्स के ऊर्ध्वाधर मध्य बिंदु को संरेखित करना चाहिएमूल बॉक्स के आधार रेखा के साथ साथ माता-पिता की आधी x ऊँचाई ”। इस मामले में, इटैलिक पाठ के लिए लाइन बॉक्स के ऊर्ध्वाधर मध्य को आधार रेखा के साथ जोड़ा जाना चाहिए div तत्व प्लस उस तत्व की आधी ऊंचाई है। यह वास्तव में उस आधार रेखा के करीब बनाता है।
चूंकि यहां फोंट सेट नहीं हैं, इसलिए ब्राउजर करेंगेआमतौर पर एक डिफ़ॉल्ट फ़ॉन्ट आकार जैसे 16px का उपयोग करें। X-ऊँचाई फ़ॉन्ट पर निर्भर करती है, लेकिन मान लें कि औसत औसत: फ़ॉन्ट आकार का आधा, 8px। इसका आधा हिस्सा 4px बनता है, जिससे अंतर कम होता है। (का फ़ॉन्ट आकार div तत्व बड़े फ़ॉन्ट आकार के साथ आंतरिक तत्वों की उपस्थिति से नहीं बदला गया है।)
स्थिति ब्राउज़र कीड़े द्वारा अस्पष्ट हो सकती है। vertical-align संपत्ति का एक छोटा इतिहास है। अक्सर सापेक्ष स्थिति का उपयोग करना बेहतर होता है।