Html 为什么页脚不自动居中，边距为0？_Html_Css

Html 为什么页脚不自动居中，边距为0？

html css

Html 为什么页脚不自动居中，边距为0？,html,css,Html,Css,你知道为什么在下面的代码中页脚没有居中吗 <html> <head> <style> #container {width:1000px;margin:0 auto;} #footer {margin:0 auto;} </style> </head> <body> <div id="container

你知道为什么在下面的代码中页脚没有居中吗

<html>
    <head>
        <style>
            #container {width:1000px;margin:0 auto;}
            #footer {margin:0 auto;}
        </style>
    </head>
    <body>
        <div id="container">

            <div>
                lksdfkjjindskfjsfkjflskfjsls.....sdlfkajsf
                sdfkjkkdiidkdkn   asdflkajf;lskdfioasfnasldf  ;lkjlthis is just a testing  
                ' sdlfk  sdlfk  dslfkjsf lskdfjsaf this elobrate   asdfkj   
                sdlfk  sldkfjsodsf lsdkfj   dlkjhgkjhgkjhg
            </div>

            <div id="footer">
                copyright 2014
            </div>

        </div>
    </body>
</html>

默认情况下，div是块元素。这意味着它的宽度为：100%；。保证金：0自动；将使元素居中，但如果其宽度为：100%，它将如何居中

因为那件事

实际上，它有width:auto，对于块级元素，它是其容器的全宽-但这不是100%，因为否则填充会使其溢出-Niet the Dark Absol

CSS:

页脚{宽度：200px；边距：0自动；} 也可以只对齐文本：居中

设置宽度可以解决此问题，但您必须计算它的确切宽度，并且当页脚发生更改时，您还需要重新计算并更新width属性

一个很好的解决方案是将显示设置为table，这样宽度问题将自动得到解决：

#footer {
    margin:0 auto;
    display: table;
}

试试这个，它会很好用的

将此复制到上的演示

因为它的宽度是100%。将text align:center添加到父级作为margin:0 auto的备份实际上它有width:auto，这对于块级元素是其容器的全宽-但这不是100%，否则填充会使其溢出；它不是100%。它是1000px。@4thface No容器是1000px。阅读Niet the Dark Absol的评论。动态宽度的不错解决方案。text-align:center；已经被鲁迪提议过了。另一方面，即使我不建议你使用标签，你以前使用标签的答案也将是对主题的补充。我尝试了Ruddy建议的方法&在我添加左边距之前对我无效：auto；右边距：自动；所以我加上这个解决方案，你是对的。Ruddy编辑了他的答案，添加了文本align:center；方法也许你已经在他的额外编辑之前发布了你的答案。在这种情况下，您已经对编辑进行了贡献。请注意，您仍然可以在答案中保留该方法，并注意并记住文本中的align:center；接近，左边距：自动；右边距：自动；没有必要。

#footer { text-align: center;  

   margin-left: auto ;
  margin-right: auto ;

}

<div id="container">

this is just a test.
</div>
<div id="footer">

copyright 2014

</div>

#container {width:1000px;margin:0 auto;}
#footer { text-align: center;  

   margin-left: auto ;
  margin-right: auto ;