使用CSS水平居中div

Question

所以，在我的网站上，我试图在这里http://prntscr.com/vk3cv。 正如您所见，文本不是居中的。我的HTML中有以下代码 http://prntscr.com/vk3iy，这是我的CSS prntscr.com/vk3ml。

但是，它似乎并没有集中体现。我有一个朋友帮我解决了这个问题。 我之前的代码使它刚好与左边对齐。我想知道如何才能使它完全居中？

在之前的代码中，html已从DIV class="row"更改 到DIV class="row feature"

在CSS中我没有添加feature个东西。

Answer 1

基本选项

1. 为容器指定固定宽度margin:0 auto;
2. 将容器放入HTML表格单元格（或使用CSS表格的一组类似的嵌套div）并提供表格单元格text-align:center;
3. 使用JavaScript或jQuery

如果容器的宽度可变，那么您需要＃2或＃3。

如果您决定使用＃2，则在这种情况下使用CSS表更为语义正确（支持数据网格的HTML表格和布局的CSS表格）（请参阅the last few paragraphs here）。两者都是合理的选择。但是，如果您需要IE7或更早版本的支持，那么您将不得不使用HTML表格。

自动保证金

.feature {
    width: 600px;
    margin: 0 auto;
}
.feature .3u {
    width: 200px;
}

CSS表格

<div class="table">
    <div class="row">
        <div class="cell">Content goes here</div>
    </div>
</div>
...
.table   {display: table;}
.row     {display: table-row;}
.cell    {display: table-cell;   text-align: center;}
.feature {display: inline-block; text-align: left;    width: auto;}

Answer 2

您可以在div中用于保存文本的样式表中使用text-align: center;，以使文本居中。