Twitter bootstrap 如何使用Bootstrap 4将文本居中放置在一行中

问题是

和

出现在同一行，无论我做什么，它们都不能居中

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>

---

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

#appSummary{
    justify-content:center;
}

---

您可以使用

页边距：自动

来居中项目，而不是

文本对齐：居中

为什么?

margin:0自动直接影响容器，并且当容器
是块级别（显示：块）

文本对齐：居中居中影响文本、内联和内联块级别
容器的子级—而不是容器本身


我在
中创建了一个示例，最好的方法是将文本包装在一个列中，该列具有类
文本中心



为什么这个应用程序很棒
再次总结您的应用程序的惊人之处
使用d-flex柱：更多


为什么这个应用程序很棒
再次总结您的应用程序的惊人之处
您也可以尝试添加：class=“text center”@dpretrini我还告诉过h1和p在同一行。我试着说你也漏掉了一个定义列的div，这可能会导致不必要的错误downvoter关心评论吗？我喜欢当有人否决了一个合适的解决方案时，a）没有解释自己，b）当他们明显错误时，我不知道是谁否决了。嗯，谢谢，它正在工作。你能给我解释一下flex的型号吗。我认为这是每个问题，我从互联网上看到的大部分东西都不起作用。而且h1和p也不在同一条线上line@j08691正如我在对这个问题的评论中所说的，无论谁被否决都没有错，用列定义遗漏div将导致不必要的错误errors@SamratLuitel当然，flex模型是定位元素的新方法。关于它的信息太多，无法在评论中浏览，但我建议阅读以了解更多信息。我还可以问一下为什么h1和p标记没有出现在单独的行中。在您的链接中找到了以下内容，并且对我非常有效：

#appSummary{
    justify-content:center;
}

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