Question

我想知道为什么“签出我的工作”文本在弹性框顶部而不是在中心对齐，而不管弹性框的值如何。这是代码库：https://codepen.io/don0ts/pen/JByjqO

代码： flexbox容器：

#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链接中的更多详细信息。

Answer 1

您已为margin: auto;指定了.grid-container。请使用以下命令进行更新：

margin: 0 auto;

或其他任何非0的值

如果您使用margin: auto;，则意味着所有边距都设置为auto

margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;

这意味着它将占用整个可用空间。

CSS-无论flexbox属性如何，文本均在顶部对齐

1 个答案: