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，但如果没有列，可能会破坏。

Answer 2

由于您使用的是使用flex模型的Bootstrap 4，因此请将CSS规则更改为：

#appSummary{
    justify-content:center;
}

<强> Bootply example

Answer 3

您可以使用margin: auto来定位项目，而不是text-align: center 为什么呢？

margin: 0 auto;直接影响容器，当容器时   是块级（显示：块）。

text-align: center;中心会影响文本，内联和内联块级别   容器的孩子 - 而不是容器本身。

reference

我在jsfiddle

中创建了示例

Answer 4

使用d-flex flex-column：更多here

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

        </div>
 </div>

如何使用Bootstrap 4将文本连续居中

4 个答案: