Question

我试图将文本水平居中，但它不起作用。这似乎是因为显示：table-cell 你知道一个解决方案吗？（注意我使用bootstrap）

谢谢！＆GT; 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

要使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。（在您的示例中，它看起来不是.. ）

Answer 2

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

在<p> display：table-cell？</p>中水平居中文本

2 个答案: