इनलाइन / इनलाइन-ब्लॉक तत्वों के सीएसएस वर्टिकल अलाइनमेंट

Question

मैं कई 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;
}

परिणाम:

बेला

Comments

ध्यान दें कि ऐसा नहीं होगा यदि <a>तत्वों में उनके अंदर कुछ पाठ होता है इस लिंक को देखें

— S.Serpooshan

Answer 1

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

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

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

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

Comments

यदि आप बाहरी के लिए ऊंचाई निर्दिष्ट करते हैं तो यह काम करना बंद कर देता है div।

— अभिनील दास

@AbhranilDas vertical-alignवर्तमान टेक्स्ट लाइन के सापेक्ष है, मूल तत्व नहीं। इस काम को जैसा आप चाहते हैं, बनाने के लिए line-heightइसके बजाय div सेट करें height।

— डिएगो

Answer 2

दो vertical-align:top;में aऔर span। ऐशे ही:

a, span{
 vertical-align:top;
}

इसे देखें http://jsfiddle.net/TFPx8/10/

Answer 3

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

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;
}

Comments

उन्हें बाईं ओर फ्लोट करने में समस्या यह है कि वे ब्राउज़र के बहुत छोटे होने पर अगली पंक्ति में लपेटेंगे। कभी-कभी आपको ब्राउज़र सीमा से परे भी इनलाइन रहने के लिए आइटम की आवश्यकता होती है और इस प्रकार, inline-blockएकमात्र समाधान है।

— जेक विल्सन

जबकि उस रैपिंग समस्या एक समस्या में हो सकती है, मैं कहूंगा कि यह उन मामलों के लिए एक बहुत अच्छा समाधान है जहां रैपिंग ठीक है। यह सुरुचिपूर्ण है, वांछित प्रभाव की भावना से बात करता है और माता-पिता को संशोधनों की आवश्यकता नहीं होती है।

— क्रिस्पेन स्मिथ

Answer 4

किसी inline-blockवस्तु की स्थिति को ठीक करने के लिए , ऊपर और बाएँ का उपयोग करें:

  position: relative;
  top: 5px;
  left: 5px;

धन्यवाद सीएसएस-ट्रिक्स !

Comments

translateयह भी संभव है।

— user4642212