Question

我刚刚开始关注一些关于网站开发的简单视频由于我不想仅仅通过指示，我偶然发现了一个小问题：为什么div id="header"在{c}中声明的选项margin: 0 auto中没有居中？示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FLASTER</title>

<!-- <link rel="stylesheet" href="css/styles.css"> -->

<style>

body {
    background: black;
    margin: 0;
    padding: 0;
    font-family: "Helvetica", "Arial";  
}

#wrapper {
    width: 960px;
    height: auto;
    background: white;
    border-left: 5px solid blue;
    border-right: 5px solid blue;
    overflow: auto;
    margin: 0 auto;
    padding: 10px;  
}

#header {
    width: 100%;
    height: 100px;
    border-bottom: 3px solid red;   

    border-left: 3px solid blue;
    border-right: 3px solid blue;
}

</style>
</head>

<body>

<div id="wrapper">

<div id="header">   

</div> <!-- End of header -->

<div id="content">



</div> <!-- End of content -->

<div id="footer">

</div> <!-- End of footer -->

</div> <!-- End of wrapper -->

</body>

</html>

Answer 1

自动边距将使框（包括填充和边框）居中，只要其总宽度为100％或更小。（如果它正好是100％然后居中，左对齐和右对齐将看起来相同。）。

标题元素不居中有两个原因：

它没有margin: 0 auto
即使它确实如此，该框的内容宽度为100％，边框也为6像素，因此最终左边对齐，最右边的6个像素被推向右边。

如果您设置width: auto，那么它将调整内容宽度以填充容器（占边框），该容器将在页面中心（因为其容器居中）。

Answer 2

它有width: 100%，那么，中心是什么？设置宽度小于100％（例如50％），将text-align: center;添加到其父级（#wrapper）并查看结果。

    #wrapper {
      text-align: center
    }
    #header {
      width: 50%;
      border: 3px solid blue;
      margin: 3px auto;
    }

Answer 3

在width: 100%中设置#wrapper，或者如果您想要最大宽度，可以设置max-width: 960px; width:100%;

#wrapper {
    width:100%
    height: auto;
    background: white;
    border-left: 5px solid blue;
    border-right: 5px solid blue;
    overflow: auto;
    margin: 0 auto;
    padding: 10px;  
}

或

#wrapper {
    max-width: 960px;
    width:100%
    height: auto;
    background: white;
    border-left: 5px solid blue;
    border-right: 5px solid blue;
    overflow: auto;
    margin: 0 auto;
    padding: 10px;  
}

Answer 4

如果要将块居中，则必须将其设置为小于100％的宽度并使用text-align:center。

如果您想将内容置于一个区块中，请使用#ifndef STUDENT_H_ #define STUDENT_H_ #include "Person.h" class Student: public Person { int ent_year; string major; public: Student *next; Student (); Student (int i_pid, string i_fname, string i_dob, string i_addr, int i_ent_year, string i_major); void Show (); void Set_ent_year (int i_ent_year); void Set_major(string i_major); int Get_ent_year(); string Get_major(); }; #endif。

HTML div中心不起作用

4 个答案: