我想知道为什么无论 flexbox 值如何,文本“Check out my work”都对齐在 flexbox 的顶部而不是中心。 这是代码笔:https://codepen.io/don0ts/pen/JByjqO
代码: flex 盒容器:
#work {
color:white;
width:100%;
height:800px;
background-color:rgb(235, 73, 67);
display:flex;
flex-direction:column;
justify-content:center;
align-content:center;
border-bottom:3px solid rgba(48,48,57,0.1);
}
flexbox 容器内的网格容器:
.grid-container{
margin:auto;
display:grid;
grid-template- columns:repeat(5,1fr);
grid-gap:10px;
}
HTML
<section id="work">
<header><h1>Check out my work</h1></header>
<div class="grid-container">
</div>
</section>
Codepen 链接中有更多详细信息。
最佳答案
您已为 .grid-container
指定了 margin: auto;
。
请更新:
margin: 0 auto;
或除 0 以外的任何其他值
如果您将使用 margin: auto;
这意味着您会将所有边距设置为 auto
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
这意味着它将占用您案例中的全部可用空间。
关于html - CSS - 无论 flexbox 属性如何,文本在顶部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51525966/