使用 Zurb Foundation CSS 框架居中 CSS

Question

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

Answer 1

列使用 small-centered、large-centered 居中。这是您想要使用 text-center.

居中的 contents

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

使用 Zurb Foundation CSS 框架居中 CSS

Centering CSS using Zurb Foundation CSS Framework

html

css

zurb-foundation-5