Wyśrodkuj pływający przycisk między dwoma przyciskami przestawiania (wymiary cieczy)

Question

Mam problemy z centrowaniem pływającego przycisku między dwoma innymi ruchomymi przyciskami.

Wygląda to tak daleko:

CSS jest dość podstawowe w tym momencie:

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

Uwaga: Przycisk A jest umieszczony na lewo-najbardziej ekstremalnych na zasadzie strona i przycisk C są najbardziej prawe. B powinno znajdować się pośrodku (to jest i tak pomysł).

Wiem, że nie ma wartości "centrum" dla pływaka. I przeczytałem kilka innych rozwiązań tego problemu. Ale większość z nich polega na ustawieniu określonej szerokości w opakowaniu div, co nie jest idealnym rozwiązaniem, imo, w przypadku projektu układu płynnego. Jeśli musisz zawinąć przycisk, nie jestem pewien, jak to jest lepsze od prostego pozycjonowania.

Tak czy inaczej, szukam rozwiązania z zastosowaniem podejścia z układem płynnym.

Próbowałem również następujące, ale nie działa.

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

Każda pomoc będzie najbardziej ceniona. Dziękuję Ci bardzo.

Answer 1

Co powiesz, jeśli umieścisz text-align: center; na swoim kontenerze i nie będziesz w ogóle pływał B?

(jestem zakładając, że jest to element inline, jeśli nie również zrobić display: inline-block; na B)

Answer 2

Moje rozwiązanie:

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

Nadzieję, że to pomaga.

Zasadniczo, użyłem trzech obwoluty dla elementów:

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

A potem przycisk umieszczony wewnątrz nich za pomocą Inline text-align nieruchomości.

Answer 3

wypróbować ten kod HTML:

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

z tego kodu CSS:

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

Answer 4

Można użyć display:table-cell do tego. Chociaż wydaje mi się, że inne odpowiedzi są prawdopodobnie lepsze, dobrze jest mieć alternatywne rozwiązania.

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

Zrobiłem to za pomocą przycisków nawigacyjnych bloger. Użyłem wcześniej wersji xec's solution.Oto wariant trick używam teraz:

.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