twitter-bootstrap Bootstrap 3 / CSS：如何在面板标题中正确垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25836880/
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 / CSS: How to properly vertically align in panel heading
提问by user2571510
I use Bootstrap 3 to create panels with a structure like the below and would like to vertically align the span within the panel heading and without extending the default height of the panel heading.
我使用 Bootstrap 3 创建具有如下结构的面板，并希望在面板标题内垂直对齐跨度，而不扩展面板标题的默认高度。
I tried different approaches (adding class="clearfix", adding style="vertical-align:middle !important;"adding style="overflow:hidden !important;"etc.) but they are all either ignored or they increase the default height of the panel heading.
我尝试了不同的方法（添加class="clearfix"、添加style="vertical-align:middle !important;"添加style="overflow:hidden !important;"等），但它们要么被忽略，要么增加了面板标题的默认高度。
My guess is that this is due to the "pull-right" class but as this is an official Bootstrap class I hope there is some workaround for this.
我的猜测是这是由于“pull-right”类，但由于这是一个官方的 Bootstrap 类，我希望有一些解决方法。
How can I achieve this? (The image I use within the link is only 32x32 so its height is less than the height of the panel heading.)
我怎样才能做到这一点？（我在链接中使用的图像只有 32x32，所以它的高度小于面板标题的高度。）
Example panel:
示例面板：
<div class="panel panel-primary">
<div class="panel-heading">
Categories
<span class="pull-right"><a href="#"><img src='images/icons/myImage.png' alt='' /></a></span>
</div>
<div class="panel-body">
// ...
</div>
</div>
回答by Christina
DEMO: http://jsbin.com/yowis/2/edit
演示：http: //jsbin.com/yowis/2/edit
<div class="panel-heading clearfix">
This will clear the float issue. That's what the issue is.
这将清除浮动问题。这就是问题所在。
If you want both the text and the image:
如果您想要文本和图像：
<div class="panel-heading clearfix">
and the CSS is:
和 CSS 是：
.panel-heading {line-height:32px;}
If you don't want to add clearfix, put this anywhere in your css:
如果您不想添加 clearfix，请将其放在 css 中的任何位置：
.panel-heading:before {
content: " ";
display: table;
}
.panel-heading:after {
clear: both;
}
回答by Showcase Imagery
I have a working fiddle of this and can't find your issue. Could you look over this and check the result is what you intended please.
我有一个工作小提琴，找不到你的问题。你能看看这个并检查结果是你想要的吗？
I've only copied out the code from Bootstrap documentation in order to get this far, but am struggling to see if the issue is resolved as I'm not sure how to replicate your problem.
为了做到这一点，我只是从 Bootstrap 文档中复制了代码，但是我正在努力查看问题是否已解决，因为我不确定如何复制您的问题。
Visit http://jsfiddle.net/showcaseimagery/jbvbojy0/
访问http://jsfiddle.net/showcaseimagery/jbvbojy0/
html
html
<div class="panel panel-primary">
<div class="panel-heading">
Categories
<span class="pull-right"><a href="#"><img src="http://placehold.it/32x32"></a></span>
</div>
<div class="panel-body">
this is panel body
</div>
</div>
css
css
img {
height:32px;
width:32px;
margin-top:-7px;
}
