अपने माता-पिता के शीर्ष पर एक तलाक को कैसे संरेखित करें लेकिन अपने इनलाइन-ब्लॉक व्यवहार को बनाए रखें?

171

प्रश्न: आप मूल डिव के शीर्ष पर बॉक्स 1 और बॉक्स 3 संरेखित कैसे कर सकते हैं boxContainer?

#boxContainerContainer {
  background: #fdd;
  text-align: center;
}

#boxContainer {
  display: inline-block;
  border: thick dotted #060;
  margin: 0px auto 10px auto;
  text-align: left;
}

#box1 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

#box2 {
  width: 50px;
  height: 100px;
  background: #999;
  display: inline-block;
}

#box3 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

बहुत सराहना की मदद ...

आभार: यह सवाल https://stackoverflow.com/users/20578/paul-d-waite द्वारा पूर्व में दिए गए उत्तर से लिया गया है : सीएसएस तत्व प्राप्त करना स्वचालित रूप से सामग्री की चौड़ाई का आकार बदलने के लिए, और उसी समय केंद्रित होना चाहिए

css html

— tur130
स्रोत

378

vertical-alignसीएसएस संपत्ति की कोशिश करो ।

#box1 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
    vertical-align: top; /* here */
}

इसे #box3भी लागू करें ।

— राइनो
स्रोत

3

आप एक सार्वभौमिक समाधान चाहते हैं, तो आप आवेदन करना चाहिए vertical-align: top;करने के लिए #boxContainer divचयनकर्ता। यह शैली को सभी divतत्वों के अंदर लागू करता है boxContainer।

— 8

30

जैसा कि दूसरों ने कहा है, vertical-align: topक्या आपका दोस्त है।

एक बोनस के रूप में यहाँ जोड़ा संवर्द्धन के साथ एक कांटा भरा हुआ है जो इसे इंटरनेट एक्सप्लोरर 6 और इंटरनेट एक्सप्लोरर 7 में भी काम करता है;)

उदाहरण: यहाँ

— clairesuzy
स्रोत

7

ऊर्ध्वाधर-संरेखित करें: शीर्ष; उस तत्व के लिए जिसे आप शीर्ष पर चाहते हैं, जैसा कि मैंने आपके jsfiddle पर प्रदर्शित किया है।

http://www.brunildo.org/test/inline-block.html

— ninjagecko
स्रोत

6

आप फ्लोट जोड़ सकते हैं: बाएं; प्रत्येक बॉक्स के लिए (बॉक्स 1, बॉक्स 2, बॉक्स 3)।

http://jsfiddle.net/Wa4ma/

— एलेक्स एमिलोव
स्रोत

यह ऊर्ध्वाधर-संरेखित +1 से बेहतर है

— जेर्गन

क्यों दुनिया में यह काम करता है? मुझे यह पसंद है, लेकिन मैं इसे समझना भी चाहूंगा।

— केविन बुलगिहे

-1

या आप बस div में कुछ सामग्री जोड़ सकते हैं और इनलाइन-टेबल का उपयोग कर सकते हैं

— रॉबर्ट वेन्ट
स्रोत

जब आप वर्टिकल-अलाइन का उपयोग कर सकते हैं तो टेबल क्यों जोड़ें?

— tcoulson

1

@tcoulson मैंने यह नहीं कहा कि मैं एक तालिका का उपयोग नहीं करता, मैंने कहा कि आप प्रदर्शन का उपयोग कर सकते हैं: इनलाइन-टेबल, जिसने 3 साल पहले बेहतर ब्राउज़र समर्थन किया था और ऊर्ध्वाधर-संरेखित करना आसान बना दिया था।

— रॉबर्ट