Bootstrap 3 / CSS:如何在面板标题中正确垂直对齐

Posted

技术标签:

【中文标题】Bootstrap 3 / CSS:如何在面板标题中正确垂直对齐【英文标题】:Bootstrap 3 / CSS: How to properly vertically align in panel heading 【发布时间】:2014-11-08 07:41:36 【问题描述】:

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

我尝试了不同的方法(添加class="clearfix"、添加style="vertical-align:middle !important;"、添加style="overflow:hidden !important;" 等),但它们要么被忽略,要么增加了面板标题的默认高度。

我的猜测是这是由于“pull-right”类造成的,但由于这是一个官方的 Bootstrap 类,我希望有一些解决方法。

我怎样才能做到这一点? (我在链接中使用的图像只有 32x32,因此它的高度小于面板标题的高度。)

示例面板:

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

【问题讨论】:

在面板标题上添加一个 clearfix 类:jsbin.com/yowis/1/edit 为了让它们都对齐,在包装器上放置一个 clearfix 并添加一些 css 以匹配高度:jsbin.com/yowis/2/edit 【参考方案1】:

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

<div class="panel-heading clearfix">

这将清除浮动问题。这就是问题所在。

如果你想要文字和图片:

<div class="panel-heading clearfix">

CSS 是:

.panel-heading line-height:32px;

如果您不想添加 clearfix,请将其放在您的 css 中的任何位置:

.panel-heading:before 
  content: " ";
  display: table;

.panel-heading:after 
  clear: both;

【讨论】:

您介意解释一下为什么您的 jsbin 的“vertical-align: middle”版本不与中心对齐吗? jsbin.com/mumatapeca/edit?html,css,js,output非常感谢! 垂直对齐中间适用于内联、内联块和表格/表格单元格情况,而不是浮动。 这不起作用。只需将 img src 更改为 placehold.it/164x164【参考方案2】:

我有一个工作小提琴,找不到你的问题。 您能否查看一下并检查结果是否符合您的预期。

为了做到这一点,我只是从 Bootstrap 文档中复制了代码,但我正在努力查看问题是否已解决,因为我不确定如何复制您的问题。

访问http://jsfiddle.net/showcaseimagery/jbvbojy0/

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

 img 
    height:32px;
    width:32px;
    margin-top:-7px;
  

【讨论】:

谢谢 - HTML 是正确的,但小提琴没有为我显示任何引导格式。 嘿@tom 那是因为没有什么可添加的。图像已经垂直居中对齐。 好的,汤姆,我添加了背景颜色来突出显示偏移量。因为我可以看到它没有对齐。 您只需在 .panel-heading 上添加一个 clearfix 即可。见我的 cmets。

以上是关于Bootstrap 3 / CSS:如何在面板标题中正确垂直对齐的主要内容,如果未能解决你的问题,请参考以下文章

Twitter Bootstrap 3 - 流动行中等高的面板

css Bootstrap选项卡面板示例

css Bootstrap面板

如何在 bootstrap 3 中使用 bootstrap-theme.css?

Bootstrap 手风琴滚动到活动面板标题的顶部

以编程方式打开面板后,Bootstrap 3 折叠可以打开多个面板