Horizontally center text in <p> display: table-cell?

Question

I'm trying to center the text horizontally, but it doesn't work. It seems to be because of the display: table-cell Would you know a work around? (note that I'm using bootstrap)

Thanks! > Codepen: http://codepen.io/goodux/pen/wgBCf

html:

<div class="feature">
    <span class="glyphicon glyphicon-star feature-icon"></span>
    <p class="feature-text text-center">
        Gather user's feedback and engineer's requirements.
    </p>
</div>

css:

.feature {
    margin-bottom: 3.5em;
    background-color: #f3f3f3;
    border-radius: 5px;

}
span.feature-icon {
    background-color: #FA6900;
    border-radius: 3px;
    color: #FFF;
    font-size: 3em;
    padding: .5em;
    position: absolute;
    top: 0;
}

p.feature-text {
    overflow: hidden;
    padding: 0 .5em 0 6.5em;
    vertical-align: middle;
    height: 6em;
    display: table-cell;
}

.text-center {
    text-align: center;
}

Answer 1

For display:table-cell to work correctly it needs to be inside a display:table element.

So, if you change the .feature rule to

.feature {
    margin-bottom: 3.5em;
    background-color: #f3f3f3;
    border-radius: 5px;
    display:table;
    width:100%;
}

it will work as expected: http://codepen.io/gpetrioli/pen/EDtCq

---

of course you could avoid using display:table-cell if it is not really needed. (and in your example it looks like it is not..)