居中对齐 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14073188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center-align a HTML table
提问by FabricePMW
On a page I'm working on at the moment, I can't seem to be able to center a table with an image in the first row and two columns of text below it (the two columns shouldn't be more than the image's width) Here's the page : http://www.puzzles-et-jeux.com/fr/page/minipuzzles.htmlI spent a lot of time trying to solve this. I would like to keep it in HTML because I have to rush and also because I have to create 20 pages of the sort with different widths /+ layouts for each image.
在我目前正在处理的页面上，我似乎无法将表格居中，第一行有一个图像，下面有两列文本（两列不应超过图像的宽度）这是页面：http: //www.puzzles-et-jeux.com/fr/page/minipuzzles.html我花了很多时间试图解决这个问题。我想将它保留在 HTML 中，因为我必须赶时间，还因为我必须为每个图像创建 20 个具有不同宽度/+ 布局的页面。
回答by Wesley Porter
For your design, it is common practice to use divs rather than a table. This way, your layout will be more maintainable and changeable through proper styling. It does take some getting used to, but it will help you a ton in the long run and you will learn a lot about how styling works. However, I will provide you with a solution to the problem at hand.
对于您的设计，通常的做法是使用 div 而不是表格。这样，您的布局将通过适当的样式更易于维护和更改。这确实需要一些时间来适应，但从长远来看它会帮助你很多，你会学到很多关于造型如何工作的知识。但是，我将为您提供解决手头问题的方法。
In your stylesheets you have margins and padding set to 0 pixels. This overrides your align="center"attribute. I would recommend taking these settings out of your CSS as you don't normally want all of your elements to be affected in this manner. If you already know what's going on in the CSS, and you want to keep it that way, then you have to apply a style to your table to override the previous sets. You could either give the table a classor you can put the style inline with the HTML. Here are the two options:
在您的样式表中，您将边距和填充设置为 0 像素。这会覆盖您的align="center"属性。我建议将这些设置从 CSS 中移除，因为您通常不希望所有元素都以这种方式受到影响。如果您已经知道 CSS 中发生了什么，并且希望保持这种状态，那么您必须将样式应用到您的表格以覆盖之前的集合。您可以给表格一个class，也可以将样式与 HTML 内联。这里有两个选项：
With a class:
<table class="centerTable"></table>
有一个类：
<table class="centerTable"></table>
In your style.css file you would have something like this:
在你的 style.css 文件中，你会有这样的东西：
.centerTable { margin: 0px auto; }
Inline with your HTML:
<table style="margin: 0px auto;"></table>
与您的 HTML 内联：
<table style="margin: 0px auto;"></table>
If you decide to wipe out the margins and padding being set to 0px, then you can keep align="center"on your <td>tags for whatever column you wish to align.
如果您决定消除设置为 0px 的边距和填充，那么您可以保留您希望对齐的任何列align="center"的<td>标签。
回答by Talha Daniyal
table
{
margin-left: auto;
margin-right: auto;
}
This will definitely work. Cheers
这肯定会奏效。干杯
回答by Avinash T.
Try this -
尝试这个 -
<table align="center" style="margin: 0px auto;"></table>
回答by alhelal
<table align="center"></table>
This works for me.
这对我有用。
