如何在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，并且有一种非常简单的方法可以使用mx-auto像<div class="mx-auto">或<h3 class="mx-auto">对齐中心的元素。 ：）

Answer 2

如果您使用的是Bootstrap 4或更高版本，则默认情况下row类为display: flex，这意味着<div class="row align-items-center">应该将div中的每个项目水平居中放置。如果要使其水平和垂直居中，请使用<div class="row justify-content-center align-items-center">

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

Answer 3

嗨，这是您解决问题的方法

    h3{
display: inline-block;
    margin: 0 auto;
}

Working fiddle