CSS ऊर्ध्वाधर संरेखित फ्लोट के साथ काम नहीं करता है

मैं गुणों में vertical-alignभी कैसे उपयोग कर सकता हूं ? अगर मैं का उपयोग नहीं करते ठीक काम करता है । लेकिन अगर मैं फ्लोट का उपयोग करता हूं, तो यह काम नहीं करता है। मेरे लिए अंतिम डिव के लिए उपयोग करना महत्वपूर्ण है ।floatdivvertical-alignfloatfloat:right

मैं निम्नलिखित कोशिश कर रहा हूं, यदि आप सभी डिव से फ्लोट को हटाते हैं तो यह ठीक काम करेगा:

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

सीएसएस:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

JSFiddle

html css vertical-alignment

— user1355300
स्रोत

जवाबों:

आपको लाइन-ऊंचाई निर्धारित करने की आवश्यकता है।

<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>

http://jsfiddle.net/VBR5J/

— एंडर्स बी
स्रोत

यदि आप line-heightसभी तत्वों के लिए समान मूल्य के साथ सेट करते हैं vertical-alignतो बेकार है। ( jsfiddle.net/VBR5J/448 )

— .derson T. Szlachta

<button>तत्वों के लिए काम नहीं करता है । के बजाय <span>एक है <button>।

— ग्रीन

यह उत्तर गलत है। ऊर्ध्वाधर-संरेखित CONTAINER (ए div) पर होता है न कि व्यक्तिगत तत्वों पर। सही समाधान - ऊर्ध्वाधर-संरेखित फ्लोटिंग तत्वों में सक्षम - दोनों को कंटेनर में vertical-alignऔर डालने के लिए है :। निकालें अवधि शैलियों से। line-height<div style="border: 1px solid red; vertical-align:middle; line-height: 38px;">vertical-align:middle; line-height: 38px;

— टूलमेकर

बस पता चला कि मैं जो सुझाव देता हूं वह उत्तर की फ़ेल्ड में फ्लोटेड स्पैन के लिए काम करता है, लेकिन कुछ तत्वों के लिए नहीं (फ़्लोटेड रेडियो इनपुट के लिए विफल)।

— टूलमेकर

@ टोलमेकरसेव गलत है, और यह जवाब गलत है। कार्यक्षेत्र-संरेखण केवल इनलाइन तत्वों, इनलाइन ब्लॉक या टेबल कोशिकाओं पर लागू होता है (उत्तरार्द्ध सिर्फ अजीब है)। 'फ्लोट' को जोड़ने से एन तत्व एक ब्लॉक एलिमेंट बन जाता है। फिर भी, लाइन-ऊंचाई का उपयोग करना (और ऊर्ध्वाधर-संरेखित करना) एक समाधान हो सकता है।

— कॉमनपाइक

संपादित:

ऊर्ध्वाधर- align सीएसएस संपत्ति एक इनलाइन, इनलाइन-ब्लॉक या तालिका सेल तत्व के ऊर्ध्वाधर संरेखण निर्दिष्ट करता है।

ऊर्ध्वाधर-संरेखित समझने के लिए यह लेख पढ़ें

— अहसान खुर्शीद
स्रोत

यह inline-blockतत्वों पर भी लागू होता है।

— रॉल्फ

अपडेट किया गया। मुझे वह याद आ गया है। उल्लेख करने के लिए धन्यवाद।

— अहसान खुर्शीद

इसका उत्तर नहीं है

— सेरज़ान अख्मेतोव

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं। - समीक्षा से

— उत्सव पटेल

ऊर्ध्वाधर संरेखण फ्लोट किए गए तत्वों के साथ काम नहीं करता है, वास्तव में। ऐसा इसलिए है क्योंकि फ्लोट दस्तावेज़ के सामान्य प्रवाह से तत्व को लिफ्ट करता है। आप अन्य वर्टिकल अलाइनिंग तकनीकों का उपयोग करना चाह सकते हैं, जैसे ट्रांसफॉर्मेशन, डिस्प्ले: टेबल, एब्सोल्यूट पोज़िशनिंग, लाइन-हाइट, js (लास्ट रिसोर्ट शायद) या यहां तक कि प्लेन ओल्ड html टेबल (शायद पहली पसंद अगर कंटेंट हो तो वास्तव में सारणीबद्ध)। आप पाएंगे कि इस मुद्दे पर गर्म बहस चल रही है।

हालाँकि, यह है कि आप अपने 3 divs को लंबवत रूप से कैसे संरेखित कर सकते हैं:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    display:inline-block;
    vertical-align: middle; 
}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua; 
    display:inline-block;
    vertical-align: middle; 
}

.right{
    width: 150px;
    background: orange;
    display:inline-block;
    vertical-align: middle; 
}

निश्चित नहीं है कि आपको दोनों निश्चित चौड़ाई की आवश्यकता क्यों है, प्रदर्शन: इनलाइन-ब्लॉक और फ्लोटिंग।

— गेब्रियल
स्रोत

समाधान प्राप्त करने के तरीके को दिखाने के लिए क्या आप अपने उत्तर में कुछ कोड जोड़ सकते हैं?

— अबरिसन

इसके अलावा, "सही उत्तर" को तोड़ना इतना आसान है ... इससे मुझे आश्चर्य होता है कि पृथ्वी पर 19 लोगों ने इसे कैसे वोट दिया।

— गेब्रियल

प्रश्न में कहा गया है "उसे फ्लोट की आवश्यकता है: अंतिम तत्व पर दाएं", इसलिए उसे कंटेनर के दाईं ओर होने के लिए अंतिम तत्व की आवश्यकता हो सकती है। अपने उत्तर में उस लक्ष्य को कैसे प्राप्त करें?

— fly.x

अच्छा जवाब, और इसके अलावा इतना स्पष्ट! यह सिर्फ फ्लेक्सबॉक्स विकल्प को याद कर रहा है।

— लुइलीफे