如果没有足够的文字，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-*。

这是一个有效的例子：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;