与 CSS 对齐后，引导按钮未居中对齐

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

将 center-block 类添加到 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>