水平对齐表格的CSS方法答案

【问题标题】：CSS way to horizontally align table水平对齐表格的CSS方法
【发布时间】：2010-09-23 00:04:18
【问题描述】：

我想在浏览器窗口的中心显示一个固定宽度的表格。现在我用

<table width="200" align="center">

但 Visual Studio 2008 在这一行给出警告：

属性 'align' 被认为是过时的。建议使用更新的构造。

我应该对表格应用什么 CSS 样式才能获得相同的布局？

【问题讨论】：

那么，你最终选择了哪种解决方案？

标签： html css alignment css-tables

【解决方案1】：

Steven 是对的，theory:

使用 CSS 使表格居中的“正确”方式。如果左右边距相等，符合标准的浏览器应该将表格居中。完成此操作的最简单方法是将左右边距设置为“自动”。因此，可以写在样式表中：

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

但是这个答案开头提到的文章为您提供了使表格居中的所有其他方式。

优雅的 css 跨浏览器解决方案：这适用于 MSIE 6（Quirks and Standards）、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>

【讨论】：

你可以让表格居中，margin: 0 auto;如果您确保您的页面具有有效的 doctype 声明，则在 IE6 及更高版本中。
@Marco：我现在还没有这些信息，但这可能是 StackOverflow 上提问的一个很好的基础。
你是完全正确的。 TABLE 不需要指定宽度即可水平居中。我测试了它。虽然 DIV 确实需要指定宽度才能获得水平居中。

【解决方案2】：

试试这个：

<table width="200" style="margin-left:auto;margin-right:auto">

【讨论】：

【解决方案3】：

简单。 IE6 及更高版本会很乐意将您的表格与“margin: 0 auto;”居中如果只有页面以“标准”模式呈现。要做到这一点，您需要一个有效的 doctype 声明，例如

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

确实，IE5.5 及更低版本仍会拒绝将表格居中，但也许您可以接受，尤其是在表格左对齐的情况下页面仍可正常工作的情况下。我认为现在 IE5.5 及以下版本的用户已经习惯了一些看起来很奇怪的网站 - 但您仍然需要确保这些视觉故障不会导致您的网站无法使用。

编码愉快！

编辑：抱歉，我或许应该指出，您不必拥有“严格”的文档类型即可让 IE6 进入“标准”渲染模式。从我上面发布的 doctype 示例中，我意识到这似乎是这样的。例如，这个 doctype 声明当然同样有效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【讨论】：

【解决方案4】：

虽然它在当今世界可能是异端 - 在过去你会做以下非 css 代码。这适用于今天的浏览器（包括今天的浏览器），但是 - 正如我所说 - 在当今世界它是异端：

<center>
<table>
   ...
</table>
</center>

您需要某种方式来告诉您想要使表格居中并且此人使用的是旧版浏览器。然后在表格周围插入“

”命令。否则 - 使用 css。

令人惊讶的是 - 如果您想将所有内容都集中在 BODY 区域 - 您可以使用标准

text-align: center;

css 命令，在 IE8 中（至少）它会将页面上的所有内容居中，包括表格。

【讨论】：

【解决方案5】：

style="text-align:center;"

（我认为）

或者你可以忽略它，它仍然有效

【讨论】：

【解决方案6】：

这应该可行：

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

【讨论】：

【解决方案7】：

我只是在学习这个，最终对我有用的是首先制作一个三行表。将左右行的边距设置为 50%。然后在中心“表格行”的“表格数据”内放置一个单行、固定宽度的表格。

【讨论】：

【解决方案8】：

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>

【讨论】：

【解决方案9】：

基本上，它的工作原理是，

<table align="center">
...

但是，您可以使用 CSS 以更好的方式做到这一点，这将是使用 CSS 的更好方法，因为它为网页提供动态行为并且具有响应性。

  <table style="text-align:center;">

另外，如果您只需要在页面上显示表格，那么您可以只使用 body 标签对齐，如下所示，

 <body style="text-align:center;">
<table>
  ...
</table>

如果您需要任何其他建议，请告诉我。一定会在这方面为您提供帮助。同样使用引导功能，这将更加简单和互动。

【讨论】：

【解决方案10】：

添加到 div 样式：

width: fit-content;

【讨论】：