twitter-bootstrap - 如何使用 Bootstrap 4 使文本居中

Question

问题是 <p>和 <h1>出现在同一行，无论我做什么，它们都无法居中。

HTML

<div class="container">
  <div class="row" id="appSummary">
    <h1>Why This App Is Awesome</h1>
    <p class="lead">Summary, once again, of your app's awesomeness</p>
  </div>
</div>

CSS

#appSummary{
  text-align:center;
}

Answer 1

最好的方法是将文本包装在具有类 的列中。 text-center .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row" id="appSummary">
    <div class="col text-center">
      <h1>Why This App Is Awesome</h1>
      <p class="lead">Summary, once again, of your app's awesomeness</p>
    </div>
  </div>
</div>

另一种方法是使用类 justify-content-center在行上，但没有列的东西 可能会中断 .