显示中的水平居中文本：表格单元格？答案

【问题标题】：Horizontally center text in display: table-cell? 显示中的水平居中文本：表格单元格？
【发布时间】：2014-09-03 04:00:54
【问题描述】：

我试图将文本水平居中，但它不起作用。似乎是因为显示：table-cell 你知道解决方法吗？（请注意，我使用的是引导程序）

谢谢！ > 密码笔：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;
}

【问题讨论】：

为什么要display:table-cell？
我希望特征文本垂直对齐。这就是我在 Stackoverflow 中找到的解决方案

标签： html css twitter-bootstrap centering

【解决方案1】：

要使display:table-cell 正常工作，它需要位于display:table 元素内。

所以，如果您将.feature 规则更改为

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

它将按预期工作：http://codepen.io/gpetrioli/pen/EDtCq

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

【讨论】：

酷。我会记住这一点，因为如果我遇到这些问题，这也可能会解决其他一些表格问题。
非常适合您的解决方案。你会怎么做才能避免 display:table-cell？
@Goodux，我没有注意到垂直对齐的文本。如果那是多行，那么你的解决方案就可以了。

【解决方案2】：

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

【讨论】：

这行不通。 margin: auto; 仅将具有特定宽度的事物居中。
是的！但我认为这个用户会根据需要设置宽度和其他内容。可能是我的回答对他没有帮助。
它不起作用/这是所有存在的代码。将其视为一个列表，文本的长度并不总是相同。
在一行文本上设置固定的 css 宽度不是一个好主意 - 它会在文本更改时强制您重写样式并完全消除响应式设计的所有机会。