Bootstrap:在div中居中标题

Question

每当我尝试将解决方案发布到类似于我的问题时,我就遇到了同样的问题.标题文本只是忽略了所有内容.这是问题标记; 这是一个非常简单的三列行.

<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,我在标准的Bootstrap CSS之上添加了它.

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

无论我使用何种样式技巧,标题文本在其父div列中都保持左对齐.我缺少什么,这将允许我正确格式化我的布局？

Answer 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内置于bootstrap,所以你不妨使用它.:)