面板标题中的引导 3 按钮组未居中答案

【问题标题】：bootstrap 3 button group in panel-header not centering面板标题中的引导 3 按钮组未居中
【发布时间】：2013-11-10 13:55:57
【问题描述】：

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

这是 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/

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

你必须清除你的花车。有很多方法可以解决这个问题，比如 clearfix hack 或使用 overflow: hidden。这就是我在你的小提琴中所做的。 http://jsfiddle.net/4ejuK/2/

.panel-heading {
    overflow: hidden;
}

如果不清除浮动的子元素，父元素将会崩溃，从而导致许多意想不到的布局问题。

【讨论】：

【解决方案2】：

添加

.container{
 line-height:2.2;
}

与上面大卫所建议的一起，使文本真正位于垂直中心。检查fiddle

【讨论】：

【解决方案3】：

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

我叉了你的小提琴：http://jsfiddle.net/Dq5ge/

【讨论】：

为普通浏览器修复了它，但我的 linux 的图标仍然低于中心...ETA，在按钮周围添加了 nbsp，它开始正常工作。不过很好的建议

【解决方案4】：

您可以为此使用技巧；）

    ...
    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.穆萨维

【讨论】：

【解决方案5】：

我今天为自己解决了这个问题。 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 为 pull-left 和 pull-right 提供的 floats。我（天真地）这样做需要一些额外的标记，但我得到了我想要的结果：

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 有用这种方法换行的倾向，这看起来很糟糕。我只是没有知识或经验来解决它。在我的用例中，我只需要单个按钮，而不是组，所以它对我来说已经足够好了。

【讨论】：

【解决方案6】：

我将 2 个最佳解决方案合二为一，以便在不改变太多尺寸或使用顶部负索引的情况下更适合：

.panel-heading {
    overflow: hidden;
}

并使用：

<div class="pull-right">

这里是示例：Jsfiddle example

【讨论】：

【解决方案7】：

已经很晚了，不过我只是通过这个css解决了：

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

【讨论】：