Question

设置正文宽度时，

margin: 0 auto无法正常工作。为什么呢？

body {
    width: 960px;
}
#header {
    height: 100px;
    background-color: Green;
    margin: 0 auto;
}

<html>
   <head>
       <title>Menu</title>
       <link rel="Stylesheet" type="text/css" href="menu.css" />
   </head>
   <body>
    <div id="header">
        
    </div>
    </body>
</html>

Answer 1

你无法设置身体宽度

为您的身体设置边距和填充，并为标题div设置

body 
{
   margin:0;
   padding:0;
}
#header
{
   width:960px;
   height:100px;
   background-color:Green;
   margin:0 auto;
}

Answer 2

margin: 0 auto;仅在应用width或max-width css属性时才有效。您在width margin: 0 auto上设置了#header，这是错误的。将您的width或max-width移至#header。

body {
    margin: 0;
}
#header {
    height: 100px;
    margin: 0 auto;
    background-color: #0f0;
    max-width: 500px; // you can set width if you don't need responsive page
}

<html>
   <head>
       <title>Menu</title>
       <link rel="Stylesheet" type="text/css" href="menu.css" />
   </head>
   <body>
    <div id="header">
        
    </div>
    </body>
</html>

Answer 3

试试这段代码：

*{margin:0 auto}

如何在网页中心制作？

3 个答案: