बटन के बगल में इस पाठ को मध्य-संरेखित कैसे करें?

Question

jsFiddle

स्क्रीनशॉट

एचटीएमएल

<div class="client-box"> 
    <div class="box-header clearfix"> 
    <h6 class="pull-left">General Information</h6> 
    <button class="btn btn-small pull-right"><i class="icon-pencil"></i> Edit</button> 
    </div> 
    <p>box content</p> 
</div> 

मैं हैडर <h6> संपादित करें बटन के संबंध में खड़ी केंद्रित कैसे मिल सकता है?

box-header पर vertical-align डालकर काम नहीं करता है। मैं लाइन-ऊंचाई को हार्ड-कोड नहीं करना चाहता क्योंकि मैं बटन आकार बदल रहा हूं या बाद में कुछ बदल सकता हूं और फिर यह टूट जाएगा।

Answer 1

तलाश करने के लिए संतोषजनक है। 1, टेबल कोशिकाओं और 2, इनलाइन तत्व:

एचटीएमएल

<div class="box-header clearfix"> 
    <div class="left-cell"> 
     <h6>General Information</h6> 
    </div> 
    <div class="right-cell"> 
     <button class="btn btn-small"><i class="icon-pencil"></i> Edit</button> 
    </div> 
</div> 

सीएसएस

.box-header { 
    border-bottom: 1px solid #aac7ef; 
    padding-bottom: 5px; 
    display: table; 
    width: 100%; 
} 
.left-cell { 
    display: table-cell; 
    vertical-align: middle; 
} 
.right-cell { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: right; 
} 

Demo

Answer 2

हाँ .. उलटी संरेखण सीएसएस में एक समस्या रही है। तो मेरा सुझाव है कि आप बॉक्स-हेडर के मार्जिन-टॉप को सेट करना है ... मार्जिन-टॉप की तरह: 1px .. बॉक्स हेडर wrt मार्जिन टॉप समायोजित करने से समस्या हल हो जाएगी। इसके अलावा आप फ़ायरफ़ॉक्स में फ़ायरबग के साथ भी जांच सकते हैं कि मार्जिन-टॉप सेट करने के लिए आपको कितने पिक्सेल की आवश्यकता है।

Answer 3

यदि आप इसे कठिन कोड नहीं करना चाहते हैं, तो शायद इसे गतिशील रूप से सेट करने का प्रयास करें।

$(function() { 
    $('h6.pull-left').css('line-height', $('button.btn.pull-right').outerHeight() + 'px'); 
}); 

मैं जो तैरता तत्वों छोड़ दिया और सही और इतने लंबवत संरेखण उस मामले में काम नहीं करेगा एक jsfiddle

Answer 4

आप pull-right और pull-left उपयोग कर रहे हैं बनाया। सबसे अच्छा आप पैडिंग के साथ खेल सकते हैं, या अन्य ने सुझाव दिया है कि line-height अपने h6 तत्व पर 24px जैसा कुछ है। और हाँ vertical-align:middle धब्बेदार पर सबसे अच्छा है, और कभी नहीं जो लोग आप सीएसएस display: table और display: table-cell और vertical-align: middle इस्तेमाल कर सकते हैं पिक्सेल पूर्णता

Answer 5

vertical-align केवल वस्तुओं के दो प्रकार के लिए लागू होता है रों।

इसका किसी अन्य प्रकार के HTML तत्व पर कोई असर नहीं पड़ता है।

ऐसा नहीं है कि यह 'स्पॉटी' या 'एक समस्या' है, यह सिर्फ इतना नहीं है कि अधिकांश लोग इसे करना चाहते हैं।

आदर्श रूप से, आप टेक्स्ट को लंबवत रूप से संरेखित करने से बचेंगे, लेकिन कभी-कभी हमें इसकी आवश्यकता होती है। ऐसा करने के कई तरीके हैं और यह तय करने के लिए कि यह किस तरह से करना है, यह आम तौर पर उस विशेष परिस्थिति पर निर्भर करता है जिसमें आप काम कर रहे हैं।

इस स्थिति में, यदि आप इसे टेक्स्ट की एक पंक्ति पर भरोसा कर सकते हैं, तो मुझे लगता है कि आपकी सबसे अच्छी शर्त कुछ अतिरिक्त शीर्ष पैडिंग या position-relative के साथ ऑप्टिकल रूप से समायोजित करना है और इसे कुछ पिक्सेल नीचे छोड़ना है।