使用Zurb Foundation CSS框架居中CSS

emi 发表于 Dev

艾米

我很难集中所有网站上的元素。我使用的是Foundation CSS，在文档页面上，他们能够使一些文本居中。我将相同的CSS复制到了页面上，但是如您所见，页面上没有任何内容居中。这是相关的html：

https://infinite-oasis-2303.herokuapp.com/

<div class="row">
  <div class="small-3 small-centered columns">first line</div>
</div>

<div class="row">
  <div class="small-6 large-centered columns">second line</div>
</div>

<div class="row">
        <div class="small-11 small-centered columns">
            <h1>The Club</h1>
            <p/>There are currently <%= Investor.count %> investors. <%= 50 - Investor.count %> places left!</p>
        </div>
</div>


<div class="row">
    <div>       
        <iframe width="700" height="400" src="https://www.youtube.com/embed/4MlZR691of0" frameborder="0" allowfullscreen></iframe>
    </div>

    <div>   
        <% if Investor.count <= 50 %>
            <%= link_to "Join the group now.", new_investor_path, class: "button radius"%>
        <% else %>
            <%= link_to "Sorry, no space.", "#", class: "button disabled"%>
        <% end %> 
    </div>
</div>

棉结

所述柱使用居中small-centered，large-centered。这是您要使用居中的内容text-center。

<div class="small-3 small-centered text-center columns">first line</div>

<div class="small-6 large-centered text-center columns">second line</div>

<div class="text-center">       
        <iframe width="700" height="400" src="https://www.youtube.com/embed/4MlZR691of0" frameborder="0" allowfullscreen></iframe>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。