Question

抱歉，我对此完全陌生。我正在尝试创建一个div，所以我可以在页面中间创建一个框，表示一切都会进入，就像在这个网站上http://www.jellyneo.net/index.php

我的HTML看起来像这样：

<!DOCTYPE HTML PUBLIC>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="CSSdoc.css" />
    </head>
    <body>
        <center>
            <div id="mainbox">
                <p>text</p>
            </div>
        </center>
        <h1> text </h1>
        <p>text</p>
        <h2> text </h2>
        <p>text</p>
    </body>
</html>

我在上面做的CSS看起来像这样

#mainbox {
    width: 900px
    text-align: left
}

我做错了什么？

Answer 1

margin:auto;

一旦固定宽度，它将在中心对齐。

<body style="margin:0;">
        <div  style="width:900px; margin:auto; border:1px solid #000;"  id="mainbox">
            <p>text</p>
     <h1> text </h1>

    <p>text</p>
     <h2> text </h2>

    <p>text</p>
        </div>

</body>

为了清楚起见，我添加了边框。

所以你的身体应该

body{
margin:0;
}

你的盒子区域应该

#mainbox{
width:900px; 
margin:auto;
}

Answer 2

您的HTML代码中不需要<center>标记; CSS将帮助您解决问题。在CSSdoc.css文件中，只需调整以下内容即可...

#mainbox {
    padding: 0;
    margin: 0 auto; /*the 0 here represents the top and bottom margin spacing. it's good to have and control in many cases.*/
    width: 900px;
    border: solid 2px #000; /*this is optional, more for debugging purposes to see your 900px scaled box*/
}

HTML5 div，我做错了什么？

2 个答案: