引导中心标题

Posted 2023-03-21

【中文标题】引导中心标题

【英文标题】：Bootstrap center heading

【发布时间】：2012-06-24 16:25:42

【问题描述】：

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

【问题讨论】：

你是如何包含标题的？在容器内部，比如p 标签，还是松散的？

@AndresIlich，在 row-fluide 内部（在 container-fluide 内部）

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

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

【参考方案1】：

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

CSS

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

【讨论】：

虽然如此，但使用 twitter bootstrap 背后的想法是尽可能使用现有的类。看看胡金普的回答

@Skurpi Frameworks 的作用是为您在项目中可以使用什么提供建议；它们绝不是给定的。虽然使用引导程序中已经给出的类和样式更简单，但如果您的项目要求“要求”您根据 OP 的问题对框架进行一些重大更改，那么最简单的方法就是修改这些更改根级别。而不是添加大量你真的不需要的课程。

@Skurpi 此外，在撰写本文时，那些对齐类did not exist。这个答案是一年前的。

【参考方案2】：

.text-left 
  text-align: left;


.text-right 
  text-align: right;


.text-center 
  text-align: center;

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

【讨论】：

bootstrap 需要在文档上更清楚地说明这一点..（150 个喜欢和计数 = 糟糕的文档。）

【参考方案3】：

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

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

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

【讨论】：

我试过了，它对我不起作用。

【参考方案4】：

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

【参考方案5】：

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

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

【讨论】：

为什么这么复杂？是不是<h1 class="text-center"> 更简单，就像Sadegh-khan's answer 一样？

当使用 bootstrap 时，使用它可以让标题集中在 div 中，而使用 text-center 则没有这样做。它使标题出现在屏幕中间，这是我的目标。

【参考方案6】：

在当前版本的 bootstrap 5.2.0 中是： 文本中心，（中心） 文本结束，（右） 文本开始，（左）。

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