css - 使用 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 表格）（请参阅此处的最后几段）。两者都是合理的选择。但如果您需要支持 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

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