Bootstrap中心标题

时间:2012-06-22 11:09:12

标签: twitter-bootstrap

这是我的第一个Twitter Bootstrap体验。我添加了一些标题(h1,h2等),它们在左侧对齐。什么是以标题为中心的正确方法?

5 个答案:

答案 0 :(得分:117)

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

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

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

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

答案 1 :(得分:49)

只需使用class =' text-center'在元素中心标题。

<!-- build:js assets/deps.js -->
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-sanitize.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<!-- endbuild -->

使用class =&#39; text-left&#39;在左侧标题的元素中, 并使用class =&#39; text-right&#39;在右侧标题的元素。

答案 2 :(得分:11)

根据您的意见,要将所有标题集中在一起,您需要同时向所有标题添加text-align:center,如下所示:

<强> CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }

答案 3 :(得分:10)

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

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>

答案 4 :(得分:5)

Bootstrap附带了许多预构建类,其中一个是class="text-left"。请在需要时拨打本课程。 :-)