Question

我在面板标题中有一个按钮组。我希望它们向右浮动，但是当我这样做时，按钮现在位于标题的底部，我需要它们居中。我该怎么做？

这是HTML：

<div class="panel panel-default">
    <div class="panel-heading">
        Member of the following Units
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
            <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
        </div>
    </div>
    <div class="panel-body">
        test
    </div>
    <div class="panel-footer">
        test
    </div>      
</div>

和一个小提琴示例：http://jsfiddle.net/snowburnt/4ejuK/

奇怪的是，在我的关于chrome的linux开发环境中，按钮本身已正确居中，但其中的图标低于应有的位置，我觉得这将解决这两个问题。

Answer 1

您应该将类pull-right添加到.btn-group div，而不是指定float：right。
浮动元素时，会丢失块布局。由于它没有高度，它将不再“压下”其容器的底部。您可以在overflow:hidden上设置.panel-heading以使其正确调整大小，从而解决此问题。您必须在.panel-heading添加顶部填充，向.btn-group添加负顶部填充以适应.btn-group.的高度

我分道扬琴：http://jsfiddle.net/Dq5ge/

Answer 2

你必须清除浮子。有很多方法，比如clearfix hack或使用overflow：hidden。这就是我在你的小提琴中所做的。 http://jsfiddle.net/4ejuK/2/

.panel-heading {
    overflow: hidden;
}

如果未清除浮动子项，则父元素将崩溃，从而导致许多意外的布局问题。

Answer 3

添加

.container{
 line-height:2.2;
}

以及大卫上面提出的将文本垂直放在中心的内容。检查fiddle

Answer 4

我将两个最佳解决方案合二为一，以获得更好的贴合度而不会改变太大的尺寸或使用顶部负面指数：

.panel-heading {
    overflow: hidden;
}

并使用：

<div class="pull-right">

这里是你的例子：Jsfiddle example

Answer 5

你可以使用技巧;）

    ...
    Member of the following Units
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
        <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
    </div>
    <div class="btn btn-primary btn-sm" style="opacity:0.001">I am hidden</div>
    ...

祝你好运 - S.M.穆萨维

Answer 6

我今天为自己解决了这个问题。 All of the seemingly-working我发现的建议涉及设置像素的高度以匹配按钮，而这与我没有合适。我希望垂直对齐与面板文本本身的实际高度无关。

如果您查看 @ithcy 的答案，并抬起font-size，则表示您遇到问题（ demo < /强>）。

我做的谷歌搜索越多，我就越相信CSS vertical-align就是我想要的，但它似乎永远不会做我认为应该做的事情。然后我遇到了 an article by Louis Lazaris ，更好地解释了vertical-align是什么，


vertical-align属性可以分为三个   易于理解的步骤：


仅适用于inline或inline-block元素

影响了   元素本身的对齐，而不是其内容（除非应用   表格）

当它应用于表格单元格时，对齐   影响细胞内容，而不是细胞本身


更重要的是：


关于vertical-align的常见误解是，当它出现时   应用于一个元素，它将使所有元素在其中   元素改变了它们的垂直位置。

我的解决方案是使用CSS表格式（毕竟这是vertical-align的用途），而不是Bootstrap为float和pull-left提供的pull-right 。它（我天真地）做了它需要一些额外的标记，但我得到了我想要的结果：

<强> HTML

<div class="panel-heading table-style"> <span class="panel-title">Member of...</span> <div class="button-wrap"> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button> <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></button> </div> </div> </div>

<强> CSS

.panel-heading.table-style { display: table; width: 100%; } .panel-heading.table-style .panel-title { display: table-cell; vertical-align: middle; text-align: left; } .panel-heading.table-style .button-wrap { display: table-cell; vertical-align: middle; text-align: right; }

我对我使用它的方式做了 demo ，我确信可以改进它。

我非常清楚btn-group倾向于使用这种看起来很糟糕的方法。我只是没有足够的知识或经验来解决它。在我的用例中，我只需要单个按钮，而不是组，所以它对我来说运作得很好。

Answer 7

现在已经很晚了，但我只是通过这个css来解决：

.panel-heading h3,
.panel-heading .btn-group
{
  display:inline-block;
}

面板标题中的bootstrap 3按钮组不居中

7 个答案: