दो फ़्लोटिंग बटन (तरल आयाम) के बीच एक फ़्लोटिंग बटन केंद्र

Question

मुझे दो अन्य फ़्लोटिंग बटनों के बीच एक फ़्लोटिंग बटन को केंद्रित करने में समस्याएं हैं।

यह इस तरह अब तक दिखता है:

सीएसएस इस बिंदु पर सुंदर बुनियादी है:

A { 
    float: left; 
} 
B { 
    float: left; 
} 
C { 
    float: right; 
} 

नोट: बटन एक करने के लिए स्थिति में है सबसे बाईं ओर एक पर चरम पेज और बटन सी सही है। बी बीच में होना चाहिए (वैसे भी विचार है, वैसे भी)।

मुझे पता है कि फ्लोट के लिए कोई 'केंद्र' मान नहीं है। और मैंने इस समस्या के लिए कुछ अन्य समाधान पढ़े हैं। लेकिन उनमें से अधिकतर एक रैपर लेव डिज़ाइन के लिए एक आदर्श समाधान, आईएमओ नहीं है, जो एक रैपर div में एक विशिष्ट चौड़ाई निर्धारित करना शामिल है। यदि आपको बटन लपेटना है, तो मुझे यकीन नहीं है कि यह सीधे स्थिति का उपयोग करने से बेहतर कैसे है।

किसी भी तरह से, मैं तरल लेआउट दृष्टिकोण का उपयोग कर समाधान ढूंढ रहा हूं।

मैंने निम्नलिखित भी कोशिश की लेकिन यह काम नहीं किया।

B { 
    position: relative; 
    left: 0; 
    right: 0; 
} 

किसी भी मदद की सराहना की जाएगी। आपका बहुत बहुत धन्यवाद।

Answer 1

अगर आप अपने कंटेनर पर text-align: center; डालते हैं और बी को फ्लोट नहीं करते हैं तो कैसे?

(मैं इसे कर रहा है यह सोचते हैं रहा हूँ एक इनलाइन तत्व, अगर नहीं भी बी पर display: inline-block; करते हैं)

Answer 2

मेरे समाधान:

http://jsfiddle.net/UWNTM/1/

आशा है कि यह मदद करता है।

असल में, मैं तत्वों के लिए तीन रैपर का प्रयोग किया:

.button_wrapper { 
    float: left; 
    width: 33%; 
} 

और फिर उन्हें अंदर बटन रखा इनलाइन text-align संपत्ति का उपयोग कर। इस सीएसएस कोड के साथ

<div class="left">1</div> 
<div class="right">3</div> 
<div class="center">2</div> 

:

Answer 3

इस एचटीएमएल कोड की कोशिश

.left { float: left; } 
.right {float: right; } 
.center { margin-left: 50%; } 

Answer 4

आप इस के लिए display:table-cell इस्तेमाल कर सकते हैं। हालांकि मुझे लगता है कि अन्य उत्तरों शायद बेहतर हैं, वैकल्पिक समाधान होना अच्छा है।

http://jsfiddle.net/bES7Q/

<div> 
    <span>a</span> 
    <span>b</span> 
    <span>c</span> 
</div> 

div { width: 100%; display: table; } 
span { 
    border: 1px solid gray; 
    display: table-cell; 
    width: 1%; 
} 
span:nth-of-type(2) { 
    width: 99%; 
    text-align: center; 
} 

Answer 5

मैं ब्लॉगर नेविगेशन बटन के साथ ऐसा किया। मैंने पहले xec's solution का उपयोग किया है।यहाँ मैं अभी उपयोग कर रहा हूँ चाल का एक प्रकार है:

.button1, .button2, .button3 
{ 
    width: 60px; 
    height: 20px; 
} 
.button1 
{ 
    /* float implies block display */ 
    float: left; 
    background-image: url(http://dummyimage.com/60x20/fc0/000.gif&text=Button+1); 
} 
.button2 
{ 
    /* set block display to make width, height and auto margin work */ 
    display: block; 
    margin: 0 auto; 
    background-image: url(http://dummyimage.com/60x20/fc0/000.gif&text=Button+2); 
} 
.button3 
{ 
    /* float implies block display */ 
    float: right; 
    background-image: url(http://dummyimage.com/60x20/fc0/000.gif&text=Button+3); 
} 

Demo