居中对齐HTML表格

Question

我正在处理的一个页面上，我似乎无法将一张图片放在第一行，下面是两列文本（两列文本不应该比图片的宽度更宽），并将表格居中。

这是该页面的链接：http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html。

我花费了很多时间来解决这个问题。我想保留HTML格式，因为我需要赶时间，而且我还要创建20个类似的页面，每个页面都有不同的宽度和布局以适应每个图像。

- FabricePMW

Answer 1

对于您的设计，使用 div 元素而不是表格是常见做法。这样，您的布局将更易于通过适当的样式进行维护和更改。虽然需要一些时间来适应，但从长远来看，它将帮助您节省大量时间，并且您将学到很多有关样式工作原理的知识。但是，我将为您提供解决当前问题的方法。

在您的样式表中，您将边距和填充设置为 0 像素。这会覆盖您的 align="center" 属性。建议您将这些设置从 CSS 中删除，因为通常您不希望所有元素都受到这种影响。如果您已经了解 CSS 的工作原理，并且希望保持原样，那么您需要为表格应用样式来覆盖以前的设置。您可以为表格设置一个 class，也可以在 HTML 中内联设置样式。以下是两个选项：

1. 使用 class：

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

在您的 style.css 文件中，您将拥有类似以下的内容：

.centerTable { margin: 0px auto; }

2. 与你的HTML内联：

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

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

- Wesley Porter

---

注意：我不会给你点踩，但是……我不认同你说你喜欢的方法是“正确”的，而别人试图使用的方法因此就是不正确的。这是CSS和HTML：能用就是对的。有些人倾向于一种方法，而另一些人则倾向于另一种方法。但是，如果一个基于标准的浏览器能够正确地显示信息：那就是做得对的。这就是它的作用。我要赞扬你（并点赞）提供了解决方案，如果你使用更接近“我如何做到”的短语，而不是“正确”的话，我甚至会感到高兴。;) - TheSatinKnight

不过，无法与"display: inline-table"一起使用。 - Barbz_YHOOL

当margin设置为auto时，0px可以省略。由于auto会使表格居中，因此NNpx仅控制顶部和底部边距。左右边距可以通过宽度来控制。例如：table { width: 60%; margin: 50px auto;} - Leon Chang

Answer 2

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

这肯定会起作用。 干杯

- Talha Daniyal

---

谢谢，运行完美，而且符合HTML5标准，不像之前的答案。 - schlingel

这个可以工作，但为什么CSS要这样设计？我们为什么要使用“margin”来对齐而不是“align”？ - Mike B

Answer 3

试试这个 -

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

- Avinash T.

---

align 属性已经过时，对于在符合标准模式下运行的页面（即具有正确的 DOCTYPE）是不必要的。 - Marat Tanalin

<table> 的 align 属性在 HTML5 中不受支持。请改用 CSS。 - Maurici Abad

Answer 4

将其翻译为中文：

给它一个center类。

然后在CSS上操作。

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

- ephantus okumu

Answer 5

      margin-left: auto;
    margin-right: auto;

您可以根据屏幕大小进行调整。

- Gabriel soft

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

Answer 6

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

这对我有效。

- alhelal

---

<table> 的 align 属性在 HTML5 中不被支持。请使用 CSS 替代。 - Maurici Abad