Центрируйте плавающую кнопку между двумя плавающими кнопками (размеры жидкости)

Question

У меня проблемы с центрированием плавающей кнопки между двумя другими плавающими кнопками.

Пока это выглядит так:

CSS довольно хорошбазовая на данный момент:

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

Примечание. Кнопка A расположена на крайнем левом углу страницы, а кнопка C - на самом правом.B должен быть посередине (это идея, во всяком случае).

Я знаю, что для float нет значения "center".И я прочитал некоторые другие решения этой проблемы.Но большинство из них включают установку определенной ширины в div обертки, что не является идеальным решением, imo, для жидкого макета.Если вам нужно обернуть кнопку, я не уверен, что это лучше, чем прямое позиционирование.

В любом случае, я ищу решение, использующее жидкостную компоновку.

Я также попробовал следующее, но оно не сработало.

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

Любая помощьбудет наиболее ценится.Большое спасибо.

Answer 1

Как насчет того, если вы положите text-align: center; на их контейнер и вообще не поместите B?

(я предполагаю, что это встроенный элемент, если нет, то также выполните display: inline-block; на B)

Answer 2

Мое решение:

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

Надеюсь, это поможет.

В основном я использовал три обертки для элементов:

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

И затем поместил внутри них кнопку, используя свойство inline text-align.

Answer 3

Я сделал это с помощью кнопок навигации блогера.Я использовал решение xec ранее.Вот вариант трюка, который я сейчас использую:

.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);
}

Демо

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

попробуйте этот HTML-код:

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

с этим кодом CSS:

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