Centering a glyphicon inside a div

css, html, twitter-bootstrap

Solution

You need the add this:

.item{
    ...
    text-align: center;
}
.item span{
    ...
    line-height: 150px;
}

http://jsfiddle.net/BLAXF/1/

Problem

Here's the fiddle: http://jsfiddle.net/sarvagnya1/BLAXF/ I need to center a glyphicon inside a div both vertically and horizontally. Here's the code: HTML: ``` <div class="container"> <div class="item"> <span class="glyphicon glyphicon-text-width"></span> </div> ``` CSS: ``` .container{ width: 600px; margin: 0 auto; border: 1px solid #000; ``` } ``` .item{ width: 150px; height: 150px; border: 1px solid #ddd; ``` } ``` .item span{ font-size: large; ``` }

Original source