html - h1 图标垂直对齐在引导程序 2.3.2 中不起作用

Question

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

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>

但是垂直对齐不适用于引导程序 2.3.2。NOTE: I know this worked in version 3.+. 如何解决此版本的此问题？

score 0 · Accepted Answer

试试这个来重载 twitter bootstrap 默认规则h1：

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

score 0 · Accepted Answer

它似乎比 bootply css-text-field 中显示的 css 更多。

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

如果你添加

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

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

2 回答 2