将两个浮动按钮（液体尺寸）之间的浮动按钮居中

Question

我遇到了浮动按钮在两个其他浮动按钮之间的问题。

到目前为止看起来像这样：

CSS在这一点上非常基础：

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

注意：按钮A位于页面的最左侧，按钮C位于最右侧。 B应该在中间（无论如何都是这个想法）。

我知道浮动没有“中心”值。我已经为此问题阅读了其他一些解决方案。但是大多数都涉及在包装div中设置特定宽度，这对于液体布局设计来说不是理想的解决方案。如果你必须包裹按钮，我不确定这比使用直接定位更好。

无论哪种方式，我都在寻找使用液体布局方法的解决方案。

我也尝试了以下但是没有用。

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

任何帮助都将非常感激。非常感谢你。

Answer 1

如果你把text-align: center;放在他们的容器上并且根本不浮动B怎么样？

（我假设它是一个内联元素，如果不是也在B上做display: inline-block;

Answer 2

我的解决方案：

  

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

希望它有所帮助。

基本上，我使用了三个包装元素：

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

然后使用内联text-align属性将按钮放入其中。

Answer 3

试试这个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%; }

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

Answer 6

    .btn-group{
    	margin-top:2%;
    	display: flex;
        justify-content: center;
    }

    			<div class="btn-group" role="group" aria-label="Basic example">
    			  <button type="button" class="btn btn-secondary">History</button>
    			  <button type="button" class="btn btn-secondary">Expertise</button>
    			  <button type="button" class="btn btn-secondary">Differentiators</button>
    			  <button type="button" class="btn btn-secondary">Values</button>
    			</div>

使用CSS属性而不是使用边距，对上面的代码进行填充也适用于所有按钮对齐