html - h1 没有对齐中心，下面没有足够的文本

Question

我的 h1 只有在下方有足够的文本时才与屏幕中心对齐。否则，它将对齐错误/根本不对齐。我该如何解决这个问题？

.content {
  margin-top: 60px;
  text-align: center;
}

body {
  background-color: #a8a8a8;
}

.textbox {
  background-color: white;
  padding: 20px 100px 100px 100px;
}

<div class="container textbox">
  <div class="row">
    <div class="col-xs-12 content">
      <h1>Contact</h1>
    </div>
  </div>
</div>

以下是我提到的每种情况下发生的情况的屏幕截图:

No text underneath the h1

A bit of text underneath the h1

Enough text underneath the h1 (the h1 finally aligns properly)

Answer 1

对于 Bootstrap 4 中这种性质的简单事物，绝对不需要任何自定义 css。text-center 类就是您想要的 h1。

此外，col-xs-* 类在 Bootstrap 4 中不再存在。现在只是 col-*。

这是一个工作示例:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col">
            <h1 class="text-center">Contact</h1>
            <p>Lorem ipsum dolor sit amet, consectetur.</p>
        </div>
    </div>
</div>