水平对齐表格的CSS方法

96

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

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

但是Visual Studio 2008在此行发出警告：

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

我应该将哪种CSS样式应用于表格以获得相同的布局？

— 亚历山大·普罗科菲耶夫（Alexander Prokofyev）
source

2

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

— 奥拉·图维森

183

从理论上讲，史蒂文是对的：

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

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>

— 冯
source

您可以使表以边距为中心：0自动；如果您确保页面具有有效的doctype声明，请在IE6及更高版本中使用。

— 奥拉·图维森

@Marco：我现在还没有此信息，但这可能是有关StackOverflow的一个很好的基础。

— VonC

1

你是完全正确的。TABLE不需要指定宽度即可水平居中。我测试了虽然DIV确实需要指定宽度才能获得水平居中。

— Marco Demaio

17

试试这个：

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

— 贾伯特
source

2

简单。IE6及更高版本将以“保证金：0自动；如果只有页面以“标准”模式呈现。为此，您需要有效的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">

— 奥拉·图维森（Ola Tuvesson）
source

2

尽管在当今世界上这可能是一个混乱的话题-过去，您将执行以下非CSS代码。这适用于直到今天的浏览器，甚至包括今天的浏览器，但是-正如我已经说过的-在当今世界中这是异端：

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

您需要以某种方式告诉您要居中放置表格，并且此人正在使用旧的浏览器。然后在表格周围插入“ <center>”命令。否则-使用CSS。

出人意料的是-如果您想将所有内容都放在“身体”区域中，您可以使用标准

text-align: center;

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

— 马克·曼宁
source

0

style="text-align:center;"

（我认为）

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

— 史蒂文·A·劳
source

0

这应该工作：

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

— 马特·豪威尔
source

0

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

0

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

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

— 钱德拉·谢卡·夏玛
source

0

基本上，它的工作原理是

<table align="center">
...

但是，您可以使用CSS更好地完成此操作，这将是使用CSS的更好方法，因为它为网页提供了动态行为并且具有响应能力。

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

另外，如果您只需要在页面上显示表格，则可以仅使用body tag对齐，如下所示，

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

如果您还有其他建议，请告诉我。一定会对您有所帮助。还使用引导功能，这将更加轻松和互动。

— 古拉夫·古塔姆（Gourav Goutam）
source

0

添加到div样式：

width: fit-content;

— 哈立德·莫哈卜（Khaled Mohab）
source