Centering a glyphicon inside a div

Question

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;

}

Answer 1

You need the add this:

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

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