HTML – 如何在网页的中心？

2023年5月24日 196次阅读

参见英文答案 >
Using “margin: 0 auto;” in Internet Explorer 8                                    12个

margin：0设置正文宽度时自动不工作.为什么？

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>

最佳答案 保证金：0自动;仅在应用宽度或最大宽度css属性时才起作用.在边缘上设置了宽度：#header上的0自动是错误的.将宽度或最大宽度移动到#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>
点赞