html - Centering CSS using Zurb Foundation CSS Framework -
i having hard time centering elements on site. i'm using foundation css , on documentation page, able center text. copied same css onto page can see, nothing on page centered. relevant 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 <%= 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 group now.", new_investor_path, class: "button radius"%> <% else %> <%= link_to "sorry, no space.", "#", class: "button disabled"%> <% end %> </div> </div>
the columns centered using small-centered
, large-centered
. it's contents 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>
Comments
Post a Comment