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中，因此您也可以使用它。：）

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

Bootstrap：在div中居中标题

2 个答案: