twitter-bootstrap 面板标题中的引导程序 3 按钮组未居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19691637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 3 button group in panel-header not centering
提问by Snowburnt
I have a button group in a panel-header. I want them floated to the right, but when I do this the buttons are now down at the bottom of the header and I need them to be centered. How do I do this?
我在面板标题中有一个按钮组。我希望它们向右浮动，但是当我这样做时，按钮现在位于标题底部，我需要它们居中。我该怎么做呢？
here's the HTML:
这是 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>
and a fiddle example: http://jsfiddle.net/snowburnt/4ejuK/
和一个小提琴示例：http: //jsfiddle.net/snowburnt/4ejuK/
Strangely enough, in my linux dev environment on chromium, the buttons themselves are properly centered but the icons within them are lower than they should be, I have a feeling this will answer both these issues.
奇怪的是，在我的 linux 开发环境 Chromium 中，按钮本身正确居中，但其中的图标低于应有的水平，我感觉这将回答这两个问题。
回答by glomad
You should add the class
pull-rightto your .btn-group div, instead of specifying float:right.When you float an element, it loses block layout. It will no longer "push down" the bottom of its container since it doesn't have a height. You can fix this by setting
overflow:hiddenon your.panel-headingto allow it to resize properly. You will have to add top padding to the.panel-headingand negative top padding to the.btn-groupto accomodate the height of the.btn-group.
您应该将该类添加
pull-right到您的 .btn-group div，而不是指定 float:right。当您浮动一个元素时，它会丢失块布局。它不会再“推下”容器的底部，因为它没有高度。您可以通过
overflow:hidden在您的.panel-heading上设置以允许其正确调整大小来解决此问题。您必须将顶部填充添加到 ，.panel-heading并将负顶部填充添加到.btn-group以适应高度.btn-group.
I forked your fiddle: http://jsfiddle.net/Dq5ge/
我分叉了你的小提琴：http: //jsfiddle.net/Dq5ge/
回答by Davidicus
You must clear your floats. There are many methods for this like the clearfix hack or using overflow: hidden. Which is what i did in your fiddle. http://jsfiddle.net/4ejuK/2/
你必须清除你的浮标。有很多方法可以做到这一点，例如 clearfix hack 或使用 overflow: hidden。这就是我在你的小提琴中所做的。http://jsfiddle.net/4ejuK/2/
.panel-heading {
overflow: hidden;
}
parent elements will collapse if their floated children are not cleared causing a lot of unexpected layout issues.
如果不清除浮动的子元素，父元素将崩溃，从而导致许多意外的布局问题。
回答by Surender
回答by forget_me_alice
I mixed the 2 best solutions in one, for a better fit without changing too much the size or using top negative index:
我将 2 个最佳解决方案合二为一，以便在不改变太多大小或使用最高负指数的情况下更适合：
.panel-heading {
overflow: hidden;
}
and using:
并使用：
<div class="pull-right">
here you are the example: Jsfiddle example
这是示例：Jsfiddle 示例
回答by lolo
It's very late, but I simply solve by this css:
已经很晚了，但我只是通过这个css解决了：
.panel-heading h3,
.panel-heading .btn-group
{
display:inline-block;
}
回答by S.M.Mousavi
You can use a trick for that ;)
你可以使用一个技巧;)
...
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>
...
Good luck - S.M. Mousavi
祝你好运 - SM 穆萨维
回答by ruok
I solved this issue for myself today. All of theseemingly-workingsuggestions I found involved setting heights of things in pixels to match the buttons, and that just didn't sit right with me. I wanted the vertical alignment to be independent of the actual height of the panel text itself.
我今天为自己解决了这个问题。我发现的所有看似可行的建议都涉及以像素为单位设置事物的高度以匹配按钮，但这并不适合我。我希望垂直对齐独立于面板文本本身的实际高度。
If you look at @ithcy's answer, and Hyman up the font-size, you have a problem (demo).
如果您查看@ithcy的答案，然后抬起font-size，您就会遇到问题（演示）。
The more googling I did, the more I became convinced that CSS's vertical-alignwas what I wanted, but it never seemed to do what I think it should do. Then I ran across an article by Louis Lazaristhat better explained what vertical-alignis,
我在谷歌上搜索得越多，我就越相信 CSSvertical-align是我想要的，但它似乎从来没有做我认为应该做的事情。然后我看到了 Louis Lazaris 的一篇文章，它更好地解释了什么vertical-align是，
The
vertical-alignproperty can be broken down into three easy-to-understand steps:
- It only applies to
inlineorinline-blockelements- It affects the alignment of the element itself, not its contents (except when applied to table cells)
- When it's applied to a table cell, the alignment affects the cell contents, not the cell itself
该
vertical-align属性可以分解为三个易于理解的步骤：
- 它只适用于
inline或inline-block元素- 它影响元素本身的对齐方式，而不是其内容（除非应用于表格单元格）
- 当它应用于表格单元格时，对齐会影响单元格内容，而不是单元格本身
and more importantly is not:
更重要的是不是：
The common misconception about
vertical-alignis that, when it's applied to an element, it will make all the elements inside that element change their vertical position.
常见的误解
vertical-align是，当它应用于一个元素时，它会使该元素内的所有元素改变它们的垂直位置。
My solution was to use CSS table formatting (which is what vertical-alignis for, after all) instead of the floats that Bootstrap provides with pull-leftand pull-right. It takes a little extra markup the way I (naively) did it, but I got the result I wanted:
我的解决方案是使用 CSS 表格格式（vertical-align毕竟这是它的用途）而不是floatBootstrap 提供的spull-left和pull-right。我（天真地）这样做需要一些额外的标记，但我得到了我想要的结果：
HTML
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
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;
}
I made a demoof the way I'm using it, which I'm sure can be improved on.
我制作了我使用它的方式的演示，我相信可以改进。
I am very aware that the btn-grouphas a tendency to wrap with this method, which looks terrible. I just don't have the knowledge or experience to fix it. In my use case, I only need single buttons, not groups, so it's working well enough for me.
我很清楚btn-group倾向于用这种方法包装，这看起来很糟糕。我只是没有知识或经验来修复它。在我的用例中，我只需要单个按钮，而不是组，所以它对我来说已经足够好了。
