Bootstrap：在 div 中居中标题 [重复]答案

【问题标题】：Bootstrap: Center a header within a div [duplicate]Bootstrap：在 div 中居中标题 [重复]
【发布时间】：2014-05-16 10:11:53
【问题描述】：

每当我尝试针对与我的问题相似的问题发布的解决方案时，我都会遇到同样的问题。标题文本只是忽略了所有内容。这是问题标记；这是一个非常简单的三列行。

<div class="row">
   <div class="col-md-4">
      <h3 class="events">Upcoming Events</h3>
   </div>
   <div class="col-md-4">
      <h3 class="register">Signup</h3>
   </div>
   <div class="col-md-4">
      <h3 class="search">Search Here</h3>
   </div>
</div>

此外，这是我在标准 Bootstrap CSS 之上添加的 CSS。

h3.earnings, h3.register, h3.search {
  text-align: center
}

无论我使用任何样式技巧，标题文本在其父 div 列中都保持左对齐。我错过了什么，这将允许我正确格式化我的布局？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

使用text-center 作为col-md-4 旁边的类。

例如：

<div class="row">
   <div class="col-md-4 text-center">
      <h3 class="events">Upcoming Events</h3>
   </div>
   <div class="col-md-4 text-center">
      <h3 class="register">Signup</h3>
   </div>
   <div class="col-md-4 text-center">
      <h3 class="search">Search Here</h3>
   </div>
</div>

或者如果你只想要h3，

<div class="row">
   <div class="col-md-4">
      <h3 class="events text-center">Upcoming Events</h3>
   </div>
   <div class="col-md-4">
      <h3 class="register text-center">Signup</h3>
   </div>
   <div class="col-md-4">
      <h3 class="search text-center">Search Here</h3>
   </div>
</div>

text-center 内置在引导程序中，因此您不妨使用它。 :)

【讨论】：

【解决方案2】：

我使用您的代码创建了一个Fiddle here，它运行良好。我猜这个问题是你把你的 CSS 放在 Bootstrap CSS 的顶部，然后在剩下的 Bootstrap CSS 中覆盖它。尝试将您的 CSS 放在 Bootstrap CSS 之后，看看会发生什么。

HTML：

<div class="row">
   <div class="col-md-4">
      <h3 class="events">Upcoming Events</h3>
   </div>
   <div class="col-md-4">
      <h3 class="register">Signup</h3>
   </div>
   <div class="col-md-4">
      <h3 class="search">Search Here</h3>
   </div>
</div>

CSS：

h3.events, h3.register, h3.search {
  text-align: center
}

【讨论】：