相关疑难解决方法(0)

当我使用一个自举badge标题,如内部h1,h2,h3垂直取向是关闭的.在badge对标题文本的对齐底部.我希望徽章垂直对齐标题文本.

HTML

<h1><span class="badge">badge</span> Heading 1</h1>
<hr>
<h2><span class="badge">badge</span> Heading 2</h2>
<hr>
<h3><span class="badge">badge</span> Heading 3</h3>

CSS

h1,h2,h3 {
  vertical-align:middle;
}

h1>.badge, h2>.badge, h3>.badge {
  vertical-align:middle;
}

结果 ..

请参阅此Bootply:http://bootply.com/88526

如何让它在垂直中心对齐？

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

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

我的猜测是,这是由于"拉右"类,但由于这是一个官方的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>

蒂姆,非常感谢.