如何使用Bootstrap 4将文本居中

dbf7pr2w 于 2023-04-09 发布在 Bootstrap

关注(0)|答案(5)|浏览(302)

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

超文本标记语言

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/47269402/how-to-center-text-in-a-row-using-bootstrap-4

5条答案

按热度按时间

xv8emn3q1#

最好的方法是将文本 Package 在类为**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，但没有列，可能会中断。

赞(0）回复(0）举报 2023-04-09

a0x5cqrl2#

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

#appSummary{
    justify-content:center;
}

Bootply example

赞(0）回复(0）举报 2023-04-09

l5tcr1uw3#

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

赞(0）回复(0）举报 2023-04-09

uubf1zoe4#

您可以使用margin: auto来居中项目，而不是text-align: center，为什么？
margin: 0 auto;直接影响容器，当容器为块级时（显示：块）。
text-align: center; center影响容器的文本、内联和内联块级别的子级，而不是容器本身。
reference
我在jsfiddle中创建了示例