摆脱 <center> 标签答案

【问题标题】：Getting rid of <center> tag摆脱 <center> 标签
【发布时间】：2011-11-05 01:58:57
【问题描述】：

我正在尝试删除 HTML 中的 <center 标记，但显然在某些情况下这并不容易。

这个答案：HTML: Replacement for <center> 也不适合我。

以下示例应该将Foo 和Bar 都居中，但它没有居中Bar。这里有什么问题？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
</head>

<body>

<div style=" margin: 0 auto; text-align:center;">
Foo
<table>
    <tr>
        <td>Bar</td>
    </tr>
</table>

</div>

</body>

</html>

如果我将<div> 替换为<center>，那么一切都按原样运行，但<center> 标记已被弃用...

【问题讨论】：

表格有固定宽度吗？

标签： html html-table center w3c-validation

【解决方案1】：

您当前的代码将包含的 div 居中，但由于它具有 width: auto（默认值），它会扩展以填充可用的水平空间。这意味着居中会将其置于与左（或右）对齐的相同位置。如果您想将该元素居中，请给它一个宽度……但看起来这不是您想要做的。

如果您想将内联内容（例如文本“Foo”）居中，则在容器上应用text-align。

如果您想将块内容（例如该表格）居中，则将您正在使用的自动边距应用该块内容（而不是容器）。

另见Centring using CSS

【讨论】：

谢谢！这就是问题所在！将样式应用于表格后，Bar 正确居中。