DIV 居中对齐答案

【问题标题】：DIV center alignDIV 居中对齐
【发布时间】：2014-11-04 12:46:03
【问题描述】：

我有 div，它的所有内容都与中心对齐：

<div align="center">
   <table><tr><td>.....

但 align 不是更有效的属性。所以，我改成了类或风格：

<div style="text-align:center;">

但是和以前不一样了。表格现在左对齐而不是居中。明显的 text-align 不等同于旧的 center 属性。我应该如何编写样式以实现与以前的中心属性相同的功能？

【问题讨论】：

请创建一个 jsfiddle。
text-align ccenters 仅 inline 项目。表是table 项目，所以它不起作用。
Volvox，那么与 align="center" 等效的 CSS 样式是什么？

标签： html css css-float

【解决方案1】：

只需在 table 上使用 margin: 0 auto 即可使其居中。

见HERE

【讨论】：

【解决方案2】：

要将表格对齐到表格的父元素的中心，只需使用：

table {
 margin: 0 auto;
}

另外，为了让表格相对于表格的父元素的高度居中对齐，您可以将 line-height 设置为与父元素的高度相同。

【讨论】：

【解决方案3】：

如上所述，您需要对齐表格

将此添加到您的 CSS：

table.center {
              margin-left:auto; 
              margin-right:auto;
             }

然后将其添加到您的表中：

<table class="center">
...
</table>

【讨论】：

这可行，但我必须更改内部元素。不能在 div 中说里面的所有东西都必须居中对齐吗？ @Maddy 解决方案不起作用。
可能，但只使用旧/无效/不受支持的代码？这允许它在多个实例中使用

【解决方案4】：

或许看看here？

我已经多次使用它来垂直居中内容。

然后看看bootstrap。他们有混合组件来处理水平对齐 (here)。

编辑：

@mattytommo 对水平对齐有很好的回答。

【讨论】：

【解决方案5】：

如果要将表格居中对齐，请使用以下内容

<table align="center">

这将使您的表格与 div 的中心对齐。

【讨论】：

正如他的问题中提到的 align 不再是一个有效的属性。

【解决方案6】：

你可以试试这个：-

div{
   width:90%;
   margin:0 auto;
   text-align:center;
}

或

<div style="width:90%;margin:0 auto;text-align:center">
   <table>
       <thead>
           <tr>
               <th>header</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>data</td>
           </tr>
       </tbody>
   </table>
</div

【讨论】：