引导中心标题

89

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

twitter-bootstrap

— 西伯利亚人
source

您如何包含标题？在容器内，例如p标签，还是松散的？

— Andres Ilich

@AndresIlich，在行流体内部（在容器流体内部）

— SiberianGuy

您是否希望所有标题都居中？还是只是几个？

— Andres Ilich 2012年

@AndresIlich，我希望所有标题默认为居中

— SiberianGuy

137

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

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

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

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

— 胡金璞
source

67

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

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

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

— 萨德汗
source

27

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

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

— Jufrench
source

2

为什么这么复杂？<h1 class="text-center">根据Sadegh-khan的回答，这不仅更简单吗？

— Marco Sulla

使用此选项时，使用引导程序时，标头可以集中在div中，而使用text-center则不行。它使标题显示在屏幕的中间，这正是我的目标。

— a.norman

11

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

的CSS

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

— 安德烈斯·伊里奇（Andres Ilich）
source

的确如此，使用twitter bootstrap背后的想法是尽可能使用现有的类。请看

— Jinpu

@Skurpi Frameworks是有关您可以在项目中使用的功能的建议；他们绝不是给定的。虽然使用引导程序中已经给出的类和样式更简单，但是如果您的项目要求“要求”您按照OP的问题对框架进行一些大的更改，则比最简单的方法是只修改这些更改。根级别。与添加大量您确实不需要的类相反。

— Andres Ilich 2013年

@Skurpi此外，在编写本文时，那些对齐类还不存在。这个答案已经一岁了。

— Andres Ilich 2013年

Ilich您说得对，我到达这里时没有看这个问题的日期

— Skurpi 2013年

5

Bootstrap带有许多预构建类，其中一个是class="text-left"。请在需要时致电该班。:-)

— 廷萨
source