कार्यक्षेत्र इनलाइन-ब्लॉक

Question

पर काम नहीं कर संरेखित मुझसे कहा गया कि:

कार्यक्षेत्र संरेखित केवल इनलाइन, इनलाइन-ब्लॉक, चित्र, और तालिका तत्वों के लिए काम करता है।
पाठ-संरेखण के विपरीत, मूल तत्व का विरोध करने के रूप में इसे बच्चे तत्व पर लागू किया जाना चाहिए।

हालांकि, जब मैंने एक इनलाइन-ब्लॉक तत्व पर लंबवत संरेखण सेट सेट करने का प्रयास किया, तो यह काम नहीं किया। क्यूं कर?

#wrapper { 
 
border: 1px solid black; 
 
width: 500px; 
 
height: 500px; 
 
} 
 
#content { 
 
border: 1px solid black; 
 
display: inline-block; 
 
vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
<div id = 'content'> content </div> 
 
</div>

Answer 1

यह काम नहीं करता है क्योंकि vertical-align इनलाइन-स्तर की सामग्री के संरेखण को उनके लाइन बॉक्स के संबंध में सेट करता है, न कि उनके युक्त ब्लॉक:

यह संपत्ति के लाइन बॉक्स के अंदर लंबवत स्थिति को प्रभावित करती है जो एक इनलाइन-स्तर तत्व द्वारा उत्पन्न बक्से हैं।

एक line box

आयताकार क्षेत्र है कि बक्से है कि एक लाइन

आप कुछ पाठ जो कई पंक्तियों है जब देखने के लिए फार्म होता है, हर एक को एक पंक्ति बॉक्स है। उदाहरण के लिए, यदि आप

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

तेज है, तो आपके मामले में की तरह केवल एक ही लाइन है, यह भी एक लाइन बॉक्स

है

vertical-align: middle केंद्र .content वर्टी का उपयोग करना उस लाइन बॉक्स के अंदर कैली। लेकिन समस्या यह है कि रेखा बॉक्स लंबवत रूप से युक्त ब्लॉक के अंदर केंद्रित नहीं है।

आप धारक ब्लॉक के बीच में खड़ी कुछ केंद्र के लिए देख How to align text vertically center in div with CSS?

Answer 2

इनलाइन/इनलाइन-ब्लॉक तत्व, छवियों, पाठ पर Vertical-align ... एक साथ तत्व संरेखित, माता पिता के साथ नहीं।

प्रयोग उदाहरण: एक पाठ में स्माइली संरेखित

आप एक 0px चौड़ाई जोड़कर धोखा कर सकते हैं, 100% ऊंचाई छद्म तत्व

#wrapper { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 200px; 
 
    vertical-align: middle; 
 
} 
 
#wrapper:after{ 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 0px; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
#content { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
    <div id = 'content'> content </div> 
 
</div>

Answer 3

यह ऊर्ध्वाधर- align का उपयोग करके मेरे लिए काम करना चाहते हैं: पाठ शीर्ष;

<div class="box"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div> 
<div class="box"> 
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div> 
<div class="box"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div> 

.box { 
    display: inline-block; 
    width: 20%; 
    margin: 5px; 
    padding:10px; 
    border-top: 5px solid #000000; 
    vertical-align: text-top; 
} 

jsfiddle