Question

为什么页脚没有以下代码为中心的任何想法？

<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>

http://jsfiddle.net/WJw5H/

Answer 1

默认情况下，div是一个块元素。 ~~这意味着它有width: 100%;~~ 。 margin: 0 auto;会使元素居中，但如果它width: 100%。

，它怎么做呢？

就此而言！

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

DEMO HERE

<强> CSS：

#footer { width: 200px; margin:0 auto;}

你也可以text-align: center;

DEMO HERE

Answer 2

设置width会解决，但您必须为其计算确切的width，并且当页脚更改时，您需要重新计算并更新width属性为好。

一个很好的解决方案是将display设置为table，以便自动解决宽度问题：

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

See fiddle here

Answer 3

#footer { text-align: center;  

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

}

试试这将完美无缺

将其复制到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 ;

为什么页脚中心没有保证金：0自动？

3 个答案: