Bootstrap按钮在与CSS对齐后未居中对齐

2013-12-21 146 views 0 likes

我目前正在使用Michael Hartl在rails rails上进行ruby教程，而我目前正在使用Bootstrap版本3.问题是我的按钮没有像中心那样对齐文字是Bootstrap按钮在与CSS对齐后未居中对齐

这是它应该看起来像 enter image description here

但是我的样子

是对齐文本和按钮来实现这些CSS样式后的变化教程： enter image description here

有人可以指引我在正确的方向吗？我的超大屏幕的代码是这样的：

<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，否则我早就想通了这一点，我自己谢谢！

来源

2013-12-21 Apprentice Programmer

回答

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

来源

2013-12-21 01:26:06 vee

我该如何为我的jumbotron添加一个中心？ –

@ApprenticeProgrammer，因为你想把它集中在你的jumbotron中。看看一些CSS提示和技巧：http://www.w3.org/Style/Examples/007/center.en.html – vee

添加中心块级到div会做

<div class="center-block jumbotron"> 

    </div>

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

编辑：截至2016年，您可以使用text-centre类来做到这一点。

来源

2014-02-11 11:55:41

请问你提供一个小例子吗？ –

Bootstrap按钮在与CSS对齐后未居中对齐

回答

相关问题