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

将 center-block 类添加到 div 即可

    <div class="center-block jumbotron">

    </div>

现在这个超大屏幕将居中对齐。

编辑:自 2016 年起，您可以使用 text-centre 类来执行此操作。