如何在div类行的中间对齐内容？

Question

我想知道是否有人可以帮助解决在中间对齐文本（“CONSOL 概述”）而不是留在下面的标题框中时应该解决的直接问题。

我尝试过“align-content：center”和“text-align：center”，但这似乎不起作用。

任何帮助表示赞赏

我的 html 页面如下所示：

html代码中的部分是这样的：

<div class="container-fluid" style="padding-top: 15px;">
    <div class="row" 
         style="height: 50px;padding-top: 15px; background: #36304a; align-content: center; color: white; font-weight: bold; border-radius: 10px">
        <h3>CONSOL Overview</h3>
    </div>
</div>

实际上我的标题下面还有更多元素，但我想这些不需要在这里显示。

Answer 1

如果您使用的是 Bootstrap 4 或更新版本，则该类row是display: flex默认的，这意味着<div class="row justify-content-center">应将每个项目水平放置在 div 中心。如果你想让它水平和垂直居中，那么使用<div class="row justify-content-center align-items-center">

另一种方法是，如果设置了容器高度，则只需使文本的行高与其相等，它将位于中心。（仅当文本仅在一行中时才有效）