居中对齐 HTML 表格

Question

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

Answer 1

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

在样式表中，您将边距和填充设置为 0 像素。这会覆盖您的

align="center"

属性。我建议从 CSS 中删除这些设置，因为您通常不希望所有元素都受到这种方式的影响。如果您已经知道 CSS 中发生了什么，并且希望保持这种状态，那么您必须将样式应用于表格以覆盖以前的设置。您可以为表格添加

class

，也可以将样式与 HTML 内联。这里有两个选项：

1. 上课：

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

在你的 style.css 文件中你会有这样的内容：

.centerTable { margin: 0px auto; }

2. 与您的 HTML 内联：

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

如果您决定清除设置为 0px 的边距和填充，那么您可以在您想要对齐的任何列的

align="center"

标签上保留

<td>

。

Answer 2

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

这肯定会起作用。 干杯

Answer 3

试试这个 -

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

Answer 4

给它一个类 center

然后是CSS

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

Answer 5

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

您可以根据屏幕尺寸进行调整