使用 Zurb Foundation CSS Framework 居中 CSS

Question

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

Answer 1

列使用 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>