DIV居中对齐

Question

我有一个div，其中所有内容都居中对齐：

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

但是align属性已经不再有效，所以我已经改成了class或者style：

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

但现在情况有所不同。表格现在被对齐到了左侧而非居中。显然，text-align属性与旧的center属性并不相同。我该如何编写样式来实现与先前使用center属性相同的功能？

- Simon

---

请创建一个JSFiddle。 - Harry

text-align 属性只能居中 inline 元素。表格是 table 元素，所以该属性不起作用。 - Volvox

Volvox，那么等效的CSS样式是什么来实现居中对齐？ - Simon

Answer 1

只需在您的表格上使用margin: 0 auto来居中它。

请点击此处查看示例。

- mattytommo

Answer 2

为了将表格居中对齐到其父元素的中心位置，只需使用以下代码：

table {
 margin: 0 auto;
} 

如果要将表格相对于其父元素的高度居中对齐，可以将行高设置为与父元素的高度相同。

- sengar19

Answer 3

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

请在CSS中添加以下内容：

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

然后将此添加到您的表格中：

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

- Matt

---

这个可以用，但是我必须更改内部元素。难道不能在 div 中说一切都必须居中对齐吗？ @Maddy 的解决方案不行。 - Simon

可能，但只能使用旧的/无效的/不支持的代码？这样可以在多个实例中使用。 - Matt

Answer 4

也许可以看一下这里？

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

然后看看bootstrap。他们有混合工具可以处理水平对齐(这里)。

编辑:

@mattytommo为水平对齐提供了一个好答案。

- Brenex

Answer 5

如果您想将表格居中对齐，请使用以下代码：

<table align="center">

这将使您的表格居中对齐到 div。

- Vineet Mishra

---

正如他的问题所提到的，align 不再是一个有效的属性。 - Matt

Answer 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

- Mukul Kant