Bootstrap按鈕在與CSS對齊後未居中對齊

Question

我目前正在使用Michael Hartl在rails rails上進行ruby教程，而我目前正在使用Bootstrap版本3.問題是我的按鈕沒有像中心那樣對齊文字是

這是它應該看起來像

但是我的樣子 ​​

是對齊文本和按鈕來實現這些CSS樣式後的變化教程：

有人可以指引我在正確的方向嗎？我的超大屏幕的代碼是這樣的：

<div class="jumbotron"> 
    <h1>Welcome to the Sample App</h1> 

    <h2> 
     This is the home page for the 
     <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a> 
     sample application. 
    </h2> 

    <%= link_to "Sign up now!", '#', class: "btn btn-primary btn-lg" %> 
    </div> 

<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %> 

我得承認，我不是偉大的CSS，否則我早就想通了這一點，我自己 謝謝！

Answer 1

將center加入您的jumbotrondiv。

<div class="center jumbotron"> 
    <h1>Welcome to the Sample App</h1> 

    <h2> 
    This is the home page for the 
    <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a> 
    sample application. 
    </h2> 

    <%= link_to "Sign up now!", '#', class: "btn btn-primary btn-lg" %> 
</div> 

Answer 2

添加中心塊級到div會做

<div class="center-block jumbotron"> 

    </div> 

現在這個超大屏幕將對齊中心。

編輯：截至2016年，您可以使用text-centre類來做到這一點。