为什么我的标题元素文本没有按预期居中？答案

【问题标题】：Why isn't my heading element text being centered as expected?为什么我的标题元素文本没有按预期居中？
【发布时间】：2020-01-16 04:29:43
【问题描述】：

CSS 部分

@media only screen and (max-width: 700px) {
  body {
    h1.h1 mb-0 text-gray-800 {
      text-align: center;
    }
  }
}

引导部分

<div class="container-fluid" style="overflow: hidden;">

          <!-- Page Heading -->
          <div class="d-sm-flex align-items-center justify-content-between mb-4">

            <h1 class="h1 mb-0 text-gray-800" >View Services</h1>

          </div>

我怎样才能使 h1 文本在这个内容的中心？

【问题讨论】：

.h1 mb-0 text-gray-800 不是有效的 CSS 选择器。
@isherwood 在上面的例子中什么是有效的选择器？
这完全取决于您要定位的目标（您真的希望仅居中灰色标题吗？），但 CSS 选择器中的类由点连接（作为单独的类)，而不是空格（好像它是一个字符串）。在您的情况下，它将是h1.h1.mb-0.text-gray-800。不过，其中大部分（包括元素类型）可能都不需要。当然，您总是可以创建自己的类（即.text-centered-mobile）。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您是否使用任何列？如果没有，那么您可以使用引导程序的网格系统来居中文本。这样，您就不必使用媒体查询，因为 boostrap 具有使内容响应的方式。 https://getbootstrap.com/docs/4.0/layout/grid/ Bootstrap 有一些非常有用的文档。

【讨论】：