How can I center multiple maps?
My page looks like this:
I want it to look like this: 
This is my code:
<div class="row center-align">
<div class="col s12 m4 l3 center">
<div class="card light-blue darken-4">
<div class="card-content white-text">
<span class="card-title">CARD 1</span>
<p>I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<%= link_to 'Sign in', new_user_session_path %>
<%= link_to "sign up" , new_user_registration_path %>
</div>
</div>
</div>
<div class="col s12 m4 l3 center">
<div class="card blue">
<div class="card-content black-text">
<span class="card-title">CARD 2</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<%= link_to 'Sign in', new_user_session_path %>
<%= link_to "sign up" , new_user_registration_path %>
</div>
</div>
</div>
</div>
<div class="row red lighten-2">
<div class="col s12 m1 l3">
<div class="center">
<i class="material-icons" style="font-size: 130px">title</i>
<h5>sdsdf sfsf</h5>
<p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh.</p>
</div>
</div>
<div class="col s1 m1 l3">
<div class="center">
<i class="material-icons" style="font-size: 130px">videocam</i>
<h5>sdsdf sfsf</h5>
<p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh..</p>
</div>
</div>
<div class="col s1 m1 l3">
<div class="center">
<i class="material-icons" style="font-size: 130px">recent_actors</i>
<h5>sdsdf sfsf</h5>
<p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh.</p>
</div>
</div>
<div class="col s1 m1 l3">
<div class="center">
<i class="material-icons" style="font-size: 130px">mail_outline</i>
<h5>sdsdf sfsf</h5>
<p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh.</p>
</div>
</div>
<div class="row center-align">
<div class="col s12 m4 l3 center">
<div class="card light-blue darken-4">
<div class="card-content white-text">
<span class="card-title">CARD 3</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<%= link_to 'Sign in', new_user_session_path %>
<%= link_to "sign up" , new_user_registration_path %>
</div>
</div>
</div>
<div class="col s12 m4 l3 center">
<div class="card blue">
<div class="card-content black-text">
<span class="card-title">CARD 4</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<%= link_to 'Sign in', new_user_session_path %>
<%= link_to "sign up" , new_user_registration_path %>
</div>
</div>
</div>
</div>
I am using materialization. I'm not sure why cards 3 and 4 fall into the red zone! Also, although I said the row was in the center, he chose to stay on the left side!
+3
source to share
2 answers
Use materialize .offset-*
classes to center the columns and it looks like you don't see the closure div
in the middle section
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/>
<div class="row center-align">
<div class="col s12 m4 l3 center offset-l3 offset-m2">
<div class="card light-blue darken-4">
<div class="card-content white-text">
<span class="card-title">CARD 1</span>
<p>I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<%= link_to 'Sign in', new_user_session_path %>
<%= link_to "sign up" , new_user_registration_path %>
</div>
</div>
</div>
<div class="col s12 m4 l3 center">
<div class="card blue">
<div class="card-content black-text">
<span class="card-title">CARD 2</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<%= link_to 'Sign in', new_user_session_path %>
<%= link_to "sign up" , new_user_registration_path %>
</div>
</div>
</div>
</div>
<div class="row red lighten-2">
<div class="col s12 m1 l3">
<div class="center">
<i class="material-icons" style="font-size: 130px">title</i>
<h5>sdsdf sfsf</h5>
<p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh.</p>
</div>
</div>
<div class="col s1 m1 l3">
<div class="center">
<i class="material-icons" style="font-size: 130px">videocam</i>
<h5>sdsdf sfsf</h5>
<p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh..</p>
</div>
</div>
<div class="col s1 m1 l3">
<div class="center">
<i class="material-icons" style="font-size: 130px">recent_actors</i>
<h5>sdsdf sfsf</h5>
<p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh.</p>
</div>
</div>
<div class="col s1 m1 l3">
<div class="center">
<i class="material-icons" style="font-size: 130px">mail_outline</i>
<h5>sdsdf sfsf</h5>
<p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh.</p>
</div>
</div>
</div>
<div class="row center-align">
<div class="col s12 m4 l3 center offset-l3 offset-m2">
<div class="card light-blue darken-4">
<div class="card-content white-text">
<span class="card-title">CARD 3</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<%= link_to 'Sign in', new_user_session_path %>
<%= link_to "sign up" , new_user_registration_path %>
</div>
</div>
</div>
<div class="col s12 m4 l3 center">
<div class="card blue">
<div class="card-content black-text">
<span class="card-title">CARD 4</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<%= link_to 'Sign in', new_user_session_path %>
<%= link_to "sign up" , new_user_registration_path %>
</div>
</div>
</div>
</div>
+4
source to share
Apply the method used for the example below and you should be fine. Adjust if necessary.
#parent {
width: 80%;
height: 100%;
text-align: center; /* this is the key */
position: relative;
margin: 0 auto;
}
.card {
width: 100px;
height: 100px;
display: inline-block;
line-height: 100px;
background-color: darkOrange;
font-weight: bold;
font-size: 36px;
}
<div id="parent">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</div>
+1
source to share