Question

我有一个格式如下的html

   <body>
   <section></section>
   <section></section>
   <section></section>
   </body>

正文是整个页面，我希望每个部分在正文中水平居中。

Answer 1

默认情况下它们居中（宽度为100％）。如果指定宽度＆lt; 100％，使用auto的左/右边距水平居中。

＆＃13;

body {
border: 1px solid black;
padding: 1em;
}

section {
width: 80%;
margin: auto;
border: 1px solid red;
height: 1em;
}

＆＃13;

<body>
   <section></section>
   <section></section>
   <section></section>
</body>

＆＃13;

您还可以在父级上使用display: flex; align-items: center; flex-direction: column;水平居中这些部分。

＆＃13;

body {
border: 1px solid black;
padding: 1em;
display: flex;
align-items: center;
flex-direction: column;
}

section {
width: 80%;
border: 1px solid red;
height: 1em;
}

＆＃13;

<body>
   <section></section>
   <section></section>
   <section></section>
</body>

＆＃13;

对准身体中的部分

1 个答案: