与CSS对齐后，Bootstrap按钮未在中心对齐

Question

我目前正在关注Michael Hartl的ruby on rails教程，我目前正在使用Bootstrap版本3.问题是我的按钮没有在文本中心对齐

这应该看起来像

然而，我看起来像

在实现这些CSS样式之后，对齐文本和按钮的教程中的更改：

有人可以指导我朝正确的方向发展吗？我的Jumbotron的代码就是这样：

  <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

将中心块类添加到div中

    <div class="center-block jumbotron">

    </div>

现在这个jumbotron将成为中心。

编辑：截至2016年，您可以使用text-centre类来执行此操作。

Answer 2

将center课程添加到jumbotron div。

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