दिलचस्प पोस्ट
दो Firebase परियोजनाओं से एक एंड्रॉइड ऐप पर पुश नोटिफिकेशन प्राप्त करें एंड्रॉइडस्ट्यूडियो – ग्रेडल में मॉड्यूल निर्भरताएं एंड्रॉइड – टुकड़ा स्थिति सहेजें / पुनर्स्थापित करें java.io.FileNotFoundException: यह फ़ाइल एक फाइल डिस्क्रिप्टर के रूप में नहीं खोई जा सकती; यह शायद संकुचित है एसवीजी पुनः-ऑर्डरिंग जेड इंडेक्स (रफेल वैकल्पिक) जावा प्लेटफार्म-स्वतंत्र जब इसे चलाने के लिए एक JVM की जरूरत है? आर में दो भूखंडों को अलग कैसे करें? एंड्रॉइड: स्क्रॉलव्यू बल से नीचे परमिको में एक ही सत्र में आप कई आदेश कैसे कार्यान्वित करते हैं? (अजगर) एंड्रॉइड संपादन टेक्स्ट – समाप्त टाइपिंग इवेंट मैं बाश में कमांड लाइन तर्क कैसे पार्स कर सकता हूँ? आप पुल पैटर्न का उपयोग कब करते हैं? यह एडेप्टर पैटर्न से कैसे अलग है? सरल पायथन चैलेंज: डाटा बफ़र पर सबसे तेज़ बीटावर्ड एक्सओआर ASP.NET में उपयोगकर्ता के क्लाइंट आईपी पते को कैसे प्राप्त करें? JQuery में प्रतीकों का अर्थ क्या है?

इनलाइन / इनलाइन-ब्लॉक तत्वों के CSS ऊर्ध्वाधर संरेखण

मैं कई inline और inline-block घटकों को एक div में खड़ी संरेखित करने की कोशिश कर रहा हूं। इस उदाहरण की span कैसे धक्का दिया जा रहा है पर जोर दिया? मैंने दोनों को vertical-align:middle; और vertical-align:top; , लेकिन कुछ भी नहीं बदलता है

HTML:

 <div> <a></a><a></a> <span>Some text</span> </div>​ 

सीएसएस:

 a { background-color:#FFF; width:20px; height:20px; display:inline-block; border:solid black 1px; } div { background:yellow; vertical-align:middle; } span { background:red; } 

परिणाम:
यहां छवि विवरण दर्ज करें

बेला

वेब के समाधान से एकत्रित समाधान "इनलाइन / इनलाइन-ब्लॉक तत्वों के CSS ऊर्ध्वाधर संरेखण"

vertical-align तत्वों पर लागू होता है, उनका मूल तत्व नहीं है। डिव के बच्चों को खड़ी रूप से संरेखित करने के लिए, इसके बजाय इसे करें:

 div > * { vertical-align:middle; // Align children to middle of line } 

देखें: http://jsfiddle.net/dfmx123/TFPx8/1186/

नोट : vertical-align वर्तमान पाठ रेखा के सापेक्ष है, पैरेंट div की पूर्ण ऊंचाई नहीं। यदि आप चाहते हैं कि माता-पिता div लम्बेदार हो और फिर भी तत्वों को लंबवत केंद्रित किया जाए, तो इसकी height की जगह div की line-height संपत्ति सेट करें उदाहरण के लिए ऊपर दिए गए jsfiddle लिंक का पालन करें

vertical-align:top; दें vertical-align:top; a और span इस कदर:

 a, span{ vertical-align:top; } 

इस http://jsfiddle.net/TFPx8/10/ की जांच करें

बस दोनों तत्वों को छोड़कर एक ही परिणाम प्राप्त होता है।

 div { background:yellow; vertical-align:middle; margin:10px; } a { background-color:#FFF; width:20px; height:20px; display:inline-block; border:solid black 1px; float:left; } span { background:red; display:inline-block; float:left; }