複数のカードをどのようにセンターに置くことができますか？

Question

マイページには、今、この権利のようになります。

私はそれが次のようになりたい：

これは私のコードです：

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

私はマテリアライズを使用しています。私はなぜカード3と4が赤い領域の中に入るのか分かりません！また、私は中央に行を話したが、それは左側に滞在することを決めた！

Answer 1

のcolsを中央にmaterialize .offset-* classesを使用して、あなたはミドルセクション

<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

に決算divを逃しているように見える、以下の例に使用される方法を適用し、あなたがします良い。必要に応じて調整します。

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