居中对齐 HTML 表格答案

【问题标题】：Center-align a HTML table居中对齐 HTML 表格
【发布时间】：2012-12-13 22:27:47
【问题描述】：

在我目前正在处理的页面上，我似乎无法将第一行中的图像和下方两列文本的表格居中（两列不应该更多比图像的宽度）这是页面：http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html 我花了很多时间试图解决这个问题。我想将它保留在 HTML 中，因为我必须赶时间，还因为我必须为每个图像创建 20 个具有不同宽度 /+ 布局的页面。

【问题讨论】：

标签： html html-table alignment

【解决方案1】：

对于您的设计，通常使用 div 而不是表格。这样，您的布局将通过适当的样式更易于维护和更改。这确实需要一些时间来适应，但从长远来看，它会帮助你很多，你会学到很多关于造型如何工作的知识。不过，我会为您提供手头问题的解决方案。

在您的样式表中，您将边距和填充设置为 0 像素。这会覆盖您的 align="center" 属性。我建议您将这些设置从您的 CSS 中取出，因为您通常不希望所有元素都以这种方式受到影响。如果您已经知道 CSS 中发生了什么，并且希望保持这种状态，那么您必须对表格应用样式以覆盖之前的设置。您可以给表格一个class，或者您可以将样式与HTML 内联。以下是两个选项：

有一个类：

<table class="centerTable"></table>

在你的 style.css 文件中，你会有这样的东西：

.centerTable { margin: 0px auto; }

与您的 HTML 内联：

<table style="margin: 0px auto;"></table>

如果您决定消除设置为 0px 的边距和填充，那么您可以将 align="center" 保留在您希望对齐的任何列的 <td> 标签上。

【讨论】：

注意：我不会对你投反对票，但是......我不同意说你喜欢的方法是“正确的”，而其他人正在尝试使用的方法就是为此不当。这是 CSS 和 HTML：有效的就是正确的。有些人倾向于一种方法，另一些人倾向于另一种方法。但是，如果基于标准的浏览器能够正确显示信息：它做得对。这就是它的用途。我确实为您提供解决方案表示赞赏（和赞成），如果您使用的短语更类似于“我是如何做到的”而不是“正确的”，我什至会对此感到高兴。 ;)
不使用显示器：inline-table tho
边距设置为自动，0px can be left out。由于自动将表格居中，NNpx 将仅控制顶部和底部边距。左右边距可以由宽度控制。例如table { width: 60%; margin: 50px auto;}

【解决方案2】：

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

这肯定会奏效。干杯

【讨论】：

谢谢，完美运行，与以前的答案不同，它符合 HTML5。

【解决方案3】：

试试这个 -

<table align="center" style="margin: 0px auto;"></table>

【讨论】：

align 属性已过时，并且对于在标准兼容模式下运行的页面（即使用正确的 DOCTYPE）来说是不需要的。
" 的 align 属性在 HTML5 中不受支持。请改用 CSS。"来自w3schools.com/Tags/att_table_align.asp

【解决方案4】：

给它一个类center

然后在 CSS 上

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

【讨论】：

【解决方案5】：

<table align="center"></table>

这对我有用。

【讨论】：

" 的 align 属性在 HTML5 中不受支持。请改用 CSS。"来自w3schools.com/Tags/att_table_align.asp