CSS实现水平对齐表格的方法

Question

CSS实现水平对齐表格的方法

107

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

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

但是Visual Studio 2008在这一行上发出了警告:

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

我应该应用什么CSS样式来获得相同的布局？

- Alexander Prokofyev

2

那么，最终你选择了哪个解决方案？ - Ola Tuvesson

11个回答

20

试试这个：

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

- jalbert

2

虽然在今天的世界中这可能是异端邪说，但过去你会使用以下非 CSS 代码。这适用于包括今天的浏览器在内的所有浏览器，但正如我所说，在今天的世界中这是异端邪说：

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

您需要的是一种方法来告诉人们您想居中一个表格，并且该用户正在使用旧版浏览器。然后在表格周围插入"<center>"命令。否则，请使用CSS。

令人惊讶的是，如果您想在BODY区域中心对齐所有内容-您只需使用标准的

text-align: center;

在CSS中使用text-align:center命令，在IE8（至少）中它将使整个页面居中，包括表格。

- Mark Manning

2

简单。如果页面以“标准”模式呈现，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及以下版本的用户已经习惯了一些奇怪的网站 - 但您仍然需要确保这些视觉故障不会使您的网站无法使用。

愉快的编码！

编辑：抱歉，我应该指出您不必拥有“严格”的doctype才能使IE6及以上版本进入“标准”呈现模式。我意识到从我上面发布的doctype示例中可能会产生这种感觉。例如，这个doctype声明当然也同样有效：

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

- Ola Tuvesson

0

如果您使用Bootstrap，可以在表格元素中添加text-center类。

  <table class="table table-bordered text-center">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
        </tr>
      </tbody>
    </table>

- Faiz Ma'ruf

0

我正在学习编程，最终为我工作的方法是首先创建一个具有三行的表格。将左右两行的边距设置为50％。然后在中心“表行”的“表数据”中放置一个单行、固定宽度的表格。

- sean

0

style="text-align:center;"

（我想）

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

- Steven A. Lowe

0

这应该可以工作：

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

- bigmattyh

0

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

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

- Chandra Shekhar Sharma

0

添加到 div 样式中：

width: fit-content;

- Khaled Mohab

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- VonC · Accepted Answer

Steven是对的，在理论上：

使用CSS居中表格的“正确”方法。符合规范的浏览器应该在左右边距相等时居中表格。实现这一点最简单的方法是将左右边距设置为“auto”。因此，可以在样式表中编写以下内容：

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

但是在这个答案开始提到的文章中，你可以找到所有其他居中表格的方法。

一种优雅的CSS跨浏览器解决方案：这适用于MSIE 6（Quirks和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>