gpt4 book ai didi

css - 如何将多张卡片居中?

转载 作者:行者123 更新时间:2023-11-28 09:23:44 25 4
gpt4 key购买 nike

我的页面现在看起来像这样: enter image description here

我希望它看起来像这样:enter image description here

这是我的代码:

<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 会进入红色区域!此外,即使我告诉该行居中,它仍决定留在左侧!

最佳答案

使用 materialize .offset-* classes将 cols 居中,看起来你错过了中间部分的结束 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>

关于css - 如何将多张卡片居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44787070/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com