在显示中水平居中文本：table-cell？

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)

我试图水平居中文本,但它不起作用。这似乎是因为显示:table-cell你知道一个解决方案吗? (注意我正在使用bootstrap)

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

谢谢! > 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;
}

2 个解决方案

#1

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

要显示:table-cell工作正常,它需要在display:table元素中。

So, if you change the .feature rule to

因此,如果您将.feature规则更改为

.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

它将按预期工作: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..)

当然你可以避免使用display:table-cell如果不是真的需要它。 (在你的例子中,它看起来不是..)

#2

Try
p { text-align: center; margin: auto }
and why are you using display:table-cell ?

试试p {text-align:center; margin:auto}你为什么使用display:table-cell?

#1