Html 水平对齐表格的 CSS 方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/301147/
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
CSS way to horizontally align table
提问by Alexander Prokofyev
I want to show a table of fixed width at the center of browser window. Now I use
我想在浏览器窗口的中心显示一个固定宽度的表格。现在我用
<table width="200" align="center">
But Visual Studio 2008 gives warning on this line:
但是 Visual Studio 2008 在这一行给出了警告：
Attribute 'align' is considered outdated. A newer construct is recommended.
属性“align”被认为是过时的。建议使用较新的构造。
What CSS style should I apply to the table to obtain the same layout?
我应该对表格应用什么 CSS 样式以获得相同的布局？
回答by VonC
Steven is right, in theory:
史蒂文是对的，理论上：
the “correct” way to center a table using CSS. Conforming browsers ought to center tables if the left and right margins are equal. The simplest way to accomplish this is to set the left and right margins to “auto.” Thus, one might write in a style sheet:
使用 CSS 将表格居中的“正确”方法。如果左右边距相等，符合标准的浏览器应该将表格居中。完成此操作的最简单方法是将左右边距设置为“自动”。因此，可以在样式表中写入：
table
{
margin-left: auto;
margin-right: auto;
}
But the article mentioned in the beginning of this answer gives you all the other way to center a table.
但是本答案开头提到的文章为您提供了将表格居中的所有其他方式。
An elegant css cross-browser solution: This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and even Netscape 4.x without setting any explicit widths:
一个优雅的 css 跨浏览器解决方案：这适用于 MSIE 6（怪癖和标准）、Mozilla、Opera 甚至 Netscape 4.x，无需设置任何明确的宽度：
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
<div class="centered">
<table>
…
</table>
</div>
回答by jalbert
Try this:
尝试这个：
<table width="200" style="margin-left:auto;margin-right:auto">
回答by Ola Tuvesson
Simple. IE6 and above will happily center your table with "margin: 0 auto;" if only the page renders in "standards" mode. To make this happen you need a valid doctype declaration, such as
简单的。IE6 及更高版本会很高兴地将您的表格居中，并使用“margin: 0 auto;” 如果只有页面以“标准”模式呈现。要实现这一点，您需要一个有效的 doctype 声明，例如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or
或者
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
True, IE5.5 and below will still refuse to center the table but perhaps you can live with that, especially if the page is still functional with the table left aligned. I think by now users of IE5.5 and below are fairly used to some odd looking websites - but you still need to ensure that those visual glitches don't render your site unusable.
确实，IE5.5 及以下版本仍会拒绝将表格居中，但也许您可以接受，尤其是当表格左对齐时页面仍能正常工作。我认为现在 IE5.5 及以下的用户已经习惯了一些看起来很奇怪的网站 - 但您仍然需要确保这些视觉故障不会使您的网站无法使用。
Happy coding!
快乐编码！
EDIT: Sorry, I should perhaps point out that you do not have to have a "strict" doctype to get IE6 and up into "standards" rendering mode. I realised it might seem that way from the doctype examples I posted above. For example, this doctype declaration will of course work equally:
编辑：抱歉，我或许应该指出，您不必拥有“严格”的文档类型即可使 IE6 及更高版本进入“标准”渲染模式。我意识到从我上面发布的文档类型示例中可能看起来是这样。例如，这个 doctype 声明当然同样有效：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
回答by Mark Manning
Although it might be heresy in today's world - in the past you would do the following non-css code. This works in everything up to and including today's browsers but - as I have said - it is heresy in today's world:
尽管在当今世界这可能是异端邪说 - 在过去，您会执行以下非 css 代码。这适用于包括当今浏览器在内的所有事物，但是 - 正如我所说 - 在当今世界这是异端邪说：
<center>
<table>
...
</table>
</center>
What you need is some way to tell that you want to center a table and the person is using an older browser. Then insert the "<center>" commands around the table. Otherwise - use css.
您需要的是某种方式来告诉您想要将表格居中并且此人使用的是旧版浏览器。然后在桌子周围插入“<center>”命令。否则 - 使用 css。
Surprisingly - if you want to center everything in the BODY area - you just can use the standard
令人惊讶的是 - 如果您想将所有内容都集中在 BODY 区域中 - 您只需使用标准
text-align: center;
css command and in IE8 (at least) it will center everything on the page including tables.
css 命令，并且在 IE8 中（至少）它将使页面上的所有内容居中，包括表格。
回答by Khaled Mohab
Add to the div style:
添加到 div 样式：
width: fit-content;
回答by Gourav Goutam
Basically, it works like,
基本上，它的工作原理是，
<table align="center">
...
But, you can do it in better way using CSS, and this will be a better approach to use CSS as it provides dynamic behavior to a web page and is responsive.
但是，您可以使用 CSS 以更好的方式做到这一点，这将是使用 CSS 的更好方法，因为它为网页提供动态行为并且是响应式的。
<table style="text-align:center;">
Also, if you need to display only table on a page then you can go with body tag alignment only as shown below,
此外，如果您只需要在页面上显示表格，那么您可以仅使用正文标签对齐方式，如下所示，
<body style="text-align:center;">
<table>
...
</table>
If you want any other suggestions please let me know. Will surely help you on this. Also using bootstrap features this would be more easy and interactive.
如果您想要任何其他建议，请告诉我。肯定会在这方面帮助你。还使用引导功能，这将更容易和交互。
回答by Gourav Goutam
I'm just learning this and what finally worked for me was to first make a table with three rows. Set the margin for the left and right rows to 50%. Then put a single row, fixed width table inside of the "table data" of the center "table row".
我只是在学习这个，最终对我有用的是首先制作一个三行的表格。将左右行的边距设置为 50%。然后在中心“表格行”的“表格数据”里面放一个单行、固定宽度的表格。
回答by Chandra Shekhar Sharma
<style>
.abc {
text-align: center;
}
</style>
<table class="abc">
<tr>
<td>Item1</td>
<td>Item2</td>
</tr>
</table>
回答by Steven A. Lowe
style="text-align:center;"
(i think)
（我认为）
or you could just ignore it, it still works
或者你可以忽略它，它仍然有效
回答by Matt Howell
This should work:
这应该有效：
<div style="text-align:center;">
<table style="margin: 0 auto;">
<!-- table markup here. -->
</table>
</div>
