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內置自舉，所以你還不如用它。 :)

Answer 2

我創建了一個Fiddle here使用您的代碼，它工作正常。我想這個問題是你把你的CSS放在Bootstrap CSS的頂部，然後在剩下的Bootstrap CSS中被覆蓋。嘗試將CS​​S放在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 
}