如何使多张卡居中？

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

使用materialize .offset-* classes 使列居中，看起来您缺少中间部分的结束div

<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

应用下面示例中使用的方法，你会没事的。根据需要进行调整。

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