如何在 div 类行的中间对齐内容？ [复制]

Posted 2023-03-05

【中文标题】如何在 div 类行的中间对齐内容？ [复制]

【英文标题】：How to align contents in the middle in div class row? [duplicate]

【发布时间】：2019-03-24 14:58:05

【问题描述】：

我想知道是否有人可以帮助解决在下面的标题框中将文本（“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>

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

【参考方案1】：

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

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

【讨论】：

谢谢我会测试它，我正在使用

使其水平居中

【参考方案2】：

我认为您正在使用 Bootstrap，并且有一种非常简单的方法可以使用 mx-auto 来对齐中心的元素，例如 <div class="mx-auto"> 或 <h3 class="mx-auto">。 :)

【讨论】：

谢谢我会测试它，我正在使用

是的，赶上结果！这个链接好像失效了！

没有必要。如果他想让 h3 垂直居中，那么一个简单的 text-align: center;在 div 上就足够了。任何类都不需要 mx-auto。如果他使用的是引导程序，那么会有一个“文本中心”类，它将文本垂直居中放置。该行的 align-items-center 类将其水平居中放置。

我同意 @PatrikAlexits，但既然 bootstrap 为我们提供了一个简单的类，为什么要为那个伙伴使用 css？

欢迎您！ @SNicolaou！很高兴它有效！满意请采纳！

【参考方案3】：

您好，这是您问题的解决方案

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

Working fiddle