111

这是我的第一次 Twitter Bootstrap 体验。我添加了一些标题（h1、h2 等），它们在左侧对齐。将标题居中的正确方法是什么？

4

6 回答 6

157 
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

bootstrap 为文本对齐添加了三个 css 类。

于 2013-03-01T06:02:02.093 回答
90

只需class='text-center'在<h>元素中使用中心标题：

<h2 class="text-center">sample center heading</h2>

class='text-left'在元素中使用<h>左标题，class='text-right'在<h>元素中使用右标题。

于 2016-05-22T20:44:33.483 回答
36

只需在行的类属性中使用“justify-content-center”。

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>
于 2018-10-28T18:47:37.010 回答
12

根据您的评论，要使所有标题居中，您只需同时添加所有标题text-align:center，如下所示：

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }
于 2012-06-22T14:45:46.240 回答
5

Bootstrap 带有许多预构建类，其中之一是class="text-left". 请在需要时致电本课程。:-)

于 2016-10-13T13:01:53.503 回答
1

在当前版本的 bootstrap 5.2.0 中，它是：text-center、(center) text-end、(right) text-start、(left)。

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
于 2021-09-01T12:54:05.693 回答