लंबवत-संरेखण: मध्य काम नहीं करता

Question

सीएसएस संपत्ति vertical-align: middle इस उदाहरण में काम नहीं करती है।

HTML:

<div> 
    <span class='twoline'>Two line text</span> 
    <span class='float'> Float right </span> 
</div> 

सीएसएस:

.float { 
    float: right; 
} 

.twoline { 
    width: 50px; 
    display: inline-block; 
} 

div { 
    border: solid 1px blue; 
    vertical-align: middle; 
} 

span कि सही पर तैर रहा है खड़ी अपनी युक्त div के संबंध में केंद्रित नहीं है। मैं इसे लंबवत केंद्रित कैसे कर सकता हूं?

उपरोक्त कोड this fiddle में है।

Answer 1

आपको table-cell में के भीतर display का उपयोग करके अपने तत्व को लपेटना होगा।

इस तरह

:

<div> 
    <span class='twoline'>Two line text</span> 
    <span class='float'>Float right</span> 
</div> 

और

.float { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: right; 
} 
.twoline { 
    width: 50px; 
    display: table-cell; 
} 
div { 
    display: table; 
    border: solid 1px blue; 
    width: 500px; 
    height: 100px; 
} 

यहाँ दिखाया गया है: http://jsfiddle.net/e8ESb/7/

Answer 2

वर्टिकल संरेखण जिस तरीके से आप चाहते हैं वह काफी काम नहीं करता है। देखें: http://phrogz.net/css/vertical-align/index.html

यह सुंदर नहीं है, लेकिन यह वही करेगा जो आप चाहते हैं: वर्टिकल संरेखण केवल तालिका कक्ष में उपयोग किए जाने पर अपेक्षित व्यवहार करता है।

http://jsfiddle.net/e8ESb/6/

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

Answer 3

जवाब मैट कश्मीर द्वारा दिए गए बिल्कुल ठीक काम करता है।

हालांकि एक बात ध्यान रखना महत्वपूर्ण है - यदि आप जिस div को लागू कर रहे हैं, उसके पास पूर्ण स्थिति है, तो यह काम नहीं करेगा। यह काम करने के लिए ऐसा करते हैं -

<div style="position:absolute; hei..."> 
    <div style="position:relative; display: table-cell; vertical-align:middle; hei..."> 
     <!-- here position MUST be relative, this div acts as a wrapper--> 
     ... 
    </div> 
</div> 

Answer 4

आप अपने अवधि के line-height संपत्ति के लिए एक निश्चित मूल्य निर्धारित करना चाहिए:

.float, .twoline { 
    line-height: 100px; 
}