Bootstrap 居中 header 在 header 换行时中断

Question

我有一个带有背景图像的 div 和一个 header，我希望它在图像前面的 div 中水平和垂直居中。我让它在只有一个词的 header 上工作：Reviews，但是当我在 header 上使用相同的方法时，它有两个词：Custom Slipcovers，它适用于中号和大号，但会中断移动：向左对齐。它似乎只有在文本换行时才会中断。

Centered Properly
Broken for mobile

我正在使用 bootstrap 4，该片段是评论横幅的工作代码。封面横幅代码在不同的页面上是相同的，并且具有相同的 css 只是具有新的 class 名称。我在这里缺少一个简单的修复方法吗？我想避免将文本变小以使其保持在一行中，因为我想使 header 的大小保持一致。

.banner, 
.bannerHeader {
    position: relative;
    height: 200px;
}

.banner::before {
    content: "";
    background-image: url(/img/reviews_banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.reviewsHeader {
    position: relative;
    font-size: 3rem;
    font-weight: bold;
}

@media (min-width: 768px) {
    .banner, 
    .bannerHeader {
        height: 300px;
    }
}

<div class="container-fluid underNav banner">
    <div class="row bannerHeader align-items-center justify-content-center">
        <h1 class="reviewsHeader">Reviews</h2>
    </div>
</div>

此处适用于较短的 header： Mobile centered

Answer 1

给你...正如@Cute Code Rob 提到的，你应该添加 text-center。让我知道这是否适合你。

.banner,
.bannerHeader {
  position: relative;
  height: 200px;
}

.banner::before {
  content: "";
  background-image: url(/img/reviews_banner.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.reviewsHeader {
  position: relative;
  font-size: 3rem;
  font-weight: bold;
}

@media (min-width: 768px) {
  .banner,
  .bannerHeader {
    height: 300px;
  }
}

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossorigin='anonymous'>
  <script src='https://code.jquery.com/jquery-3.2.1.slim.min.js' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' crossorigin='anonymous'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' crossorigin='anonymous'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl' crossorigin='anonymous'></script>

</head>

<body>

  <div class='container-fluid underNav banner'>
    <div class='row bannerHeader align-items-center justify-content-center'>
      <h1 class='reviewsHeader text-center'>Reviews</h1>
    </div>
  </div>

</body>

</html>

Bootstrap 居中 header 在 header 换行时中断

Bootstrap centered header breaks when header wraps

bootstrap-4