CSS中的相同代码在同一页面上的2个位置给出不同的结果

Question

想知道为什么相同的代码在网页上提供2个不同的结果。我已将链接粘贴到我的代码以及下面以及导致混淆的提取。 #video提供集中内容，而#table提供左对齐内容。

#video{ 
    text-align:center;
    position:relative;
    top:1600px;
    padding:10px;
    opacity:0.7;
}

#table {
    text-align:center;
    position:relative;
    top:700px;

}

代码link

Answer 1

考虑到你拥有的css类，＃table对应一个包含该表的div。 Div本身具有100％的宽度并且显示为块。您将表格宽度指定为700％（顺便说一句，它们以某种方式阻止并清除所有周围的元素）。因此，如果你有一个display：block或display：table，并且你想要水平集中它，最好的选择是将左边距和右边距设置为auto。

因此，请将此添加到您的css类：

 #table table{
      margin:auto
}

这基本上意味着元素内的所有表格都带有＆＃34;表格＃34;应该有＆＃34; auto＆＃34;。

的保证金值

Answer 2

text-align: center会使里面的文本你的对象（table，div等）居中。

margin: 0 auto会将对象本身置于页面中心。

所以你需要的是margin: 0 auto;（auto是对象居中的那个，0是顶部和底部边距）。

考虑到代码的结构，边距：0 auto;需要应用于表，而不是其父div。

table {
    background-color: transparent;
    margin: 0 auto;
}

您也不需要<a name="table"></a>因为您可以使用id="table"作为主播。