How do I center Glyphicons horizontally using Twitter Bootstrap
All you need is to define display:block
with text-align:center
in the i
inside your container div
and you'll have it:
.col-lg-4 i {
display:block;
text-align:center
}
Here is a demo
EDIT #1: As this answer seems to get some traction, it is worth to note that the more "twitter-bootstrapy" way of doing this would be what @SimoneMelloni suggested in their answer to this question, ie. the use of the text-center
class.
Note that this is basically the same as my solution, considering all text-center
does is set text-align:center
, it is just making use of a twitter bootstrap feature.
Also note that text-align:center
only works on block-level elements or ones where you explicitly set display:block
, as in my original answer above. There I needed to specify that because I used it on the i
tag, which is an inline element.
EDIT #2: I just saw your [OP] edit on the center
element: while it is indeed not CSS but HTML, that's less of an issue, the bigger issue with it is that it's obsolete. See more info on it on MDN's doc on the <center>
element
<div class="text-center">
<i class="fa fa-camera-retro fa-5x></i>
</div>
Did the trick without opening the css file