使用Zurb Foundation CSS Framework使CSS居中

I am having a hard time centering all the elements on my site. I'm using Foundation CSS and on the documentation page, they were able to center some text. I copied the same css onto my page but as you can see, nothing on the page is centered. This is the relevant html:

我很难将所有元素集中在我的网站上。我正在使用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>

1 个解决方案

#1

The columns are centered using small-centered, large-centered. It's the contents that you want centered using 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>