【问题标题】：Center a floating button between two floating buttons (liquid dimensions)在两个浮动按钮之间居中浮动按钮（液体尺寸）
【发布时间】：2012-02-20 21:21:41
【问题描述】：

我在将浮动按钮置于其他两个浮动按钮之间时遇到问题。

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

此时的 CSS 非常基础：

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

注意：按钮 A 位于页面的最左端，而按钮 C 位于最右端。 B 应该在中间（反正就是这样）。

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

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

我也尝试了以下方法，但没有成功。

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

任何帮助将不胜感激。非常感谢。

【问题讨论】：

A 和 B 按钮看起来是正确的；你打算把B按钮放在中间吗？我认为这看起来不对。为什么不让 C 按钮向左浮动？
好的，谢谢。我的意图是将B按钮放在中间。我应该指定上面的图像是页面的宽度。请允许我重做。
我想我的答案是一样的；您应该将按钮放在自己的 div 中，并将它们全部浮动到左侧。
你的标记怎么样？包含在 DIV 中的 3 个简单元素？因为我看到这种情况发生的唯一方法是包装在一个 div 居中对齐，按钮 A 和 C 浮动。
好吧，如果您的按钮在自己的 div 中，您可以将 div 浮动到任何您想要的位置，并且按钮将保持在一起。

标签： css button css-float center liquid

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我的解决方案：

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

希望对你有帮助。

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

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

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

【讨论】：

【解决方案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%; }

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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

【讨论】：

【解决方案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属性代替使用margin，padding上面的代码也适合所有的按钮对齐

【讨论】：