Question

我试图将示例中的div class="filter-group"水平居中于两个浮动按钮之间，但是失败了。非常感谢。 HTML：

<div class="container">
    <div class='row'>
        <div class='col-xs-12 clearfix'>
            <button type='button' class='btn btn-default pull-left'>Previous</button>
            <div class="filter-group">
                Filter projects:
                <button class="btn btn-default">a</button>
                <button class="btn btn-default">b</button>
                <button class="btn btn-default">c</button>
            </div>
            <button type='button' class='btn btn-default pull-right'>Next project</button>
        </div>
    </div>
</div>

CSS：

.filter-group{
    display: inline-block;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    border-left: 1px solid #adadad;
    border-right: 1px solid #adadad;
}
    .filter-group button{
    margin: 0 5px;
}

Answer 1

这是对您的代码的更新

http://jsfiddle.net/ZewGC/6/

我做了两处修改。首先放置两个按钮然后放置div，然后从中心div中删除display: inline-block。

当您放置浮动元素时，非浮动元素会调整它们，反之亦然。

Answer 2

http://jsfiddle.net/ZewGC/3/

您可以使用绝对定位：

display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);

Answer 3

仅仅是个人偏好，但您使用网格系统而不使用网格系统来定位元素似乎很奇怪。所以，我建议你用cols来集中......例如。

<div class='col-xs-2'>Left Button here</div>
<div class='col-xs-4 col-xs-offset-2'>Centered block</div>
<div class='col-xs-2 col-xs-offset-2'>Right button here</div>

水平居中两个浮动元素之间的div

3 个答案: