h1图标vertical-align在bootstrap 2.3.2中不起作用

Question

我在h1中有显示图标的css/HTML代码：

CSS：

h1 {
font-size:32px;
font-weight:400;
margin:6px 0;

}
h1>i {
display:inline-block;
vertical-align:middle;
text-align:center;
}

HTML：

<div class="container">
<h1><i class="icon-search"></i>Bootstrap 3 Glyphicons</h1>
</div>

但纵向对齐不适用于bootstrap 2.3.2。 NOTE: I know this worked in version 3.+。如何解决这个版本的问题？

demo here

Answer 1

尝试使用此选项来重载h1的推文默认规则：

h1>[class^="icon-"], h1>[class*=" icon-"] {
    vertical-align: middle;
}

<强> Updated demo

Answer 2

似乎有更多的CSS比在bootply css-text-field中显示的更多。

[class^="icon-"], [class*=" icon-"] {
    vertical-align:text-top;
}

如果你添加

.icon-search {
    vertical-align: middle;
}

...对于你的css，它会将图像垂直居中。