嗨，所以我只需要一些帮助flexbox，我查看了其他人，甚至复制了那里的代码进行测试，但由于某种原因它不起作用。我正在尝试让div内容在网站的顶部中心对齐。这是我当前的代码，索引.html<div class="header"> <div class="headerContent"> <h1>TEST<h1> </div></div样式.csshtml { display: flex;}.header { display: flex; align-items: center; justify-content: center; flex-direction: column;} .headerContent { background-color: #2C374C; width: 100%; justify-content: center;}
3 回答
九州编程
TA贡献1785条经验 获得超4个赞
看来你正在做正确的事情，但在错误的元素上。当它是子容器时，您将.headerid 视为父容器。
在这种情况下，容器层次结构如下html-> header->.headerContent
因此，要居中，header您需要对其父级采取行动。将其想象为父母向其孩子发出命令（字面意思）。
html {
display: flex;
justify-content: center;
}
通过这样做，父组件正在证明其内容（子组件）
我还建议不要使用 html 创建另一个 div 容器作为标头 div 的父容器，如下所示
.headerContainer {
display: flex;
justify-content: center;
background-color: red
}
.header {
display: flex;
}
.headerContent {
background-color: #2C374C;
width: 100%;
}
<div class="headerContainer">
<div class="header">
<div class="headerContent">
<h1>TEST<h1>
</div>
</div>
</div>
子衿沉夜
TA贡献1828条经验 获得超3个赞
我想就像这样
.header {
width: 100%;
}
.headerContent {
background-color: #2c374c;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<html>
<link rel="stylesheet" href="style.css" />
<div class="header">
<div class="headerContent">
<h1>Test</h1>
</div>
</div>
</html>
眼眸繁星
TA贡献1873条经验 获得超9个赞
当您使用flex-direction: column;, 来水平居中时，请使用align-items: center;而不是justify-content: center;
您还设置了一个height属性。
例子：
.header{
display: flex;
height: 300px;
justify-content: center;
align-items: center;
background: red
}
<header class="header">
<div>centered</div>
</header>
- 3 回答
- 0 关注
- 132 浏览
添加回答
举报
0/150
提交
取消