Bootstrap 3 - 如何将标题居中并<span>？</span>

Question

我如何在bootstrap3列中将标题或我用“span”设置的内容居中？

如果我使用“text-center”和“p”标签 - 一切正常......但我需要设置文本样式。

示例（工作正常）：

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center"> <p> hello </p></div>

但这不起作用。我想改变文本的大小和颜色，然后将其居中。

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center"> <h1> hello </h1></div>

Answer 1

您可以做两件事：

a）将'text-center'类应用于h1

<h1 class="text-center">

b）将此样式应用于h1：

h1 {
 display:inline-block;
}

h1文本不居中的原因是因为父文件的'text-center'类适用于元素h1而不是其内容，它占据整个宽度，因此你不能将整个宽度居中元件;它占据了整个宽度。

在h1元素上应用文本中心类，使其内部内容居中。

应用'display：inline-block'使h1元素的宽度等于它的内容，因此它可以居中。

Answer 2

解决问题的引导方法如下：

UIImage

问题：H1标记仅跨越文本的宽度。

解决方案：<h1 class="text-center container-fluid">Heading</h1>将跨越整个宽度容器，跨越视口的整个宽度。

Answer 3

如果您正在寻找快速解决方案，这应该可行。

  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <center><h1>hello</h1></center>
  </div>

如果你也可以编写CSS以便覆盖标题

 h1{
     font-family: _______ !important;
     font: ____ !important
     margin:0 auto !important;
 }