为什么页脚不以margin：0自动居中？
[英]Why doesn't footer center with margin:0 auto?
问题描述
Any ideas why the footer is not centering in the following code? 
为什么页脚不在以下代码中居中？
<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>
3 个解决方案
解决方案1
5 已采纳 2014-05-15 16:46:53
By default a div is a block element. 默认情况下， div是一个块元素。 This means it has width: 100%;这意味着它的 . width: 100%;。 margin: 0 auto; will center the element but how can it do that if its width: 100% . 将元素居中，但是如果元素的width: 100% ，该如何做呢？
For that matter! 对于这个问题！
Actually it has width: auto , which for a block-level element is the full width of its container - but that's not 100% because otherwise padding would make it overflow - Niet the Dark Absol 实际上，它具有width: auto ，对于块级元素而言，它是其容器的完整宽度-但这不是100％，因为填充会使其溢出 -Niet the Dark Absol
CSS: CSS：
#footer { width: 200px; margin:0 auto;}
Also you could just text-align: center; 您也可以只text-align: center;
解决方案2
1 2014-05-15 16:51:04
Setting a width would resolve, but you would have to calculate the exact width for it, and when the footer changes, you will need to recalculate and update the width property as well. 设置width可以解决问题，但是您必须为其计算确切的width ，并且当页脚更改时，还需要重新计算和更新width属性。
A nice solution to that would be setting the display to table , so the width issue will automatically be resolved: 一个很好的解决方案是将display设置为table ，因此宽度问题将自动解决：
#footer {
margin:0 auto;
display: table;
}
解决方案3
1 2014-05-15 16:53:28
#footer { text-align: center;
margin-left: auto ;
margin-right: auto ;
}
try this it will work perfect 试试这个，它将完美
copy this to the demo on http://jsfiddle.net/WJw5H/15/ 将其复制到http://jsfiddle.net/WJw5H/15/上的演示中
<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 ;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.