gpt4 book ai didi

html - 主体中的居中部分

转载 作者:行者123 更新时间:2023-11-28 15:44:52 25 4
gpt4 key购买 nike

我有一个格式如下的html

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

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

最佳答案

它们默认居中(宽度为 100%)。如果您指定的宽度 < 100%,请使用 auto 的左/右边距将它们水平居中。

body {
border: 1px solid black;
padding: 1em;
}

section {
width: 80%;
margin: auto;
border: 1px solid red;
height: 1em;
}
<body>
<section></section>
<section></section>
<section></section>
</body>

你也可以使用display: flex;对齐元素:居中; flex-direction: column; 在父级上以水平居中各部分。

body {
border: 1px solid black;
padding: 1em;
display: flex;
align-items: center;
flex-direction: column;
}

section {
width: 80%;
border: 1px solid red;
height: 1em;
}
<body>
<section></section>
<section></section>
<section></section>
</body>

关于html - 主体中的居中部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42941249/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com