h1 icon vertical-align not work in bootstrap 2.3.2

Question

I have this css/HTML code for show icon in 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>

But vertical-align not worked for bootstrap 2.3.2. NOTE: I know this worked in version 3.+. how to fix this problem for this version?

score 0 · Accepted Answer · answered Oct 07 '13 at 14:03

0

Try this instead to overload twitter bootstrap default rule for h1 :

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

answered Oct 07 '13 at 14:03

Brewal

score 0 · Answer 2 · answered Oct 07 '13 at 14:07

0

There seems to be more css to it than showing in the bootply css-text-field.

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

If you add

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

...to your css, it will position the image centered vertically.

answered Oct 07 '13 at 14:07

Kablam

1

although it works, this will match every `.icon-search` in the page, and only `.icon-search`. No other icon. I think that the OP wants to match every icon inside `h1` tag (he is trying : `h1>i`) – Brewal Oct 07 '13 at 14:11
Good thinking, you're right. But the moral of the story here is: use firebug to see which statements are being overridden. – Kablam Oct 07 '13 at 14:18

2 Answers2