内容未在引导程序网格中居中

Question

.course-card{
background: white;
border-radius: 0.25rem;
padding: 1rem 1rem 1rem 1rem;
text-align: center;
}

<div class="row d-flex align-items-center course-card">
<div class="col-md-6 course-progress">
<p>test</p>
</div>
<div class="col-md-6 course-info">
<div id="div2-1 course-name">
<p>test</p>
</div>
<div id="div2-2 course-button">
<p>test</p>
</div>
</div>
</div>

我的结果

我想要什么

我试图将我的内容集中在bootstrap中，但即使添加了d-flex align-items-center，内容仍然关闭，正如你在图中看到的，它甚至不在中间，但下部有更多的空间。

Answer 1

将d-flex align-items-center作为一个类添加本身不会有任何作用。由于我们看不到CSS的其余部分，所以不清楚该代码会做什么。

然而，你可以尝试一下：

div {
display: flex;
outline: 1px dashed blue;
justify-content: space-evenly;
flex-grow: 1;
text-align: center;
}
p {
align-self: center;
}

<div style="width: 300px; height: 150px;">
<div style="flex-direction: row;">
<div>
<p>test</p>
</div>
<div style="flex-direction: column">
<div>
<p>test</p>
</div>
<div>
<p>test</p>
</div>
</div>
</div>

您可以在每个div周围使用蓝色虚线来帮助参考元素相对于彼此的定位方式。

div已正确对齐，但p标记中的文本在垂直方向上的间距不正确。在我的示例中，p元素都与align-self: center垂直对齐，这应该可以解决您注意到的问题。