Bootstrap 3 / CSS：如何在面板标题中正确垂直对齐 [英] Bootstrap 3 / CSS: How to properly vertically align in panel heading

问题描述

我使用Bootstrap 3来创建具有类似下面的结构的面板，并希望垂直对齐面板标题中的跨度，而不扩展面板标题的默认高度。

我尝试了不同的方法（添加 class =clearfix，添加 style = vertical-align：middle！important;添加 style =overflow：hidden！important;等）它们增加面板标题的默认高度。

我的猜测是，这是由于pull-right类，但因为这是一个官方的Bootstrap类，我希望有一些解决方法。

有人可以告诉我如何实现这一点？

（我在链接中使用的图片只有32x32，所以其高度小于高度）

<$ p $ <>

code>< div class =panel panel-primary>
< div class =panel-heading>
分类
< span class =pull-right>< a href =＃>< img src ='images / icons / myImage.png'alt = >< / a>< / span>
< / div>
< div class =panel-body>
// ...
< / div>
< / div>

非常感谢Tim。

解决方案

演示： http： //jsbin.com/yowis/2/edit

 < div class =panel-heading clearfix > 
  

这将清除浮动问题。

如果你想要文本和图像：

 
 code>< div class =panel-heading clearfix> 
  

且CSS是：

  .panel-heading {line-height：32px;} 
  

你不想添加clearfix，把它放在你的css中：

  .panel-heading：before {
 content：; 
 display：table; 
} 
 .panel-heading：after {
 clear：both; 
} 
  

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.

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.

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.

Can someone tell me how to achieve this ?
(The image I use within the link is only 32x32 so its height is less than the height of the panel heading.)

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>

Many thanks in advance, Tim.

解决方案

DEMO: 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:

.panel-heading {line-height:32px;}

If you don't want to add clearfix, put this anywhere in your css:

.panel-heading:before {
  content: " ";
  display: table;
}
.panel-heading:after {
  clear: both;
}

这篇关于Bootstrap 3 / CSS：如何在面板标题中正确垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！