Wie kann ich mehrere Karten zentrieren?

Question

Meine Seite sieht wie folgt jetzt:

Ich will es so aussehen:

Dies ist mein 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> 

ich materialisieren bin mit. Ich bin nicht sicher, warum Karten 3 und 4 in den roten Bereich gehen! Auch wenn ich gesagt habe, dass die Reihe zentrieren soll, hat sie sich entschieden, auf der linken Seite zu bleiben!

Answer 1

Verwenden Sie die materialize .offset-* classes die cols zum Zentrum, und sieht aus wie Sie die Schließung div auf dem mittleren Abschnitt für das Beispiel

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

Answer 2

Wenden Sie das Verfahren sind vermisst unten verwendet und Sie werden fein. Passen Sie wie erforderlich an.

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