[英]How to align card-desk center of page
I need solve problem to align card-desk to center of page for large screen.我需要解决问题以将卡片桌与大屏幕的页面中心对齐。 I'm using Bootstrap 4. My current code here https://jsbin.com/faheheboxu/edit?html,css,output I'm using Bootstrap 4. My current code here https://jsbin.com/faheheboxu/edit?html,css,output
I used.container for flex, card-desk with cards in flex container, but don't know how align card-desk center vertically.我使用 .container 用于 flex 卡片桌,卡片放在 flex 容器中,但不知道如何垂直对齐卡片桌中心。
Tried to use absolute height and wight,and also padding.尝试使用绝对高度和重量,以及填充。 But it ruined flex with small screens但它用小屏幕破坏了弹性
<div class="container">
<div class="row align-self-center">
<div class="col-12 align-self-center">
<div class="card-deck mb-3 mt-3 text-center">
<div class="card box-shadow">
<img class="card-img-top" src="nice_house.jpg" alt="Card image cap">
<div class="card-header">
<h4 class="font-weight-normal">Best house</h4>
</div>
<div class="card-body">
<p1>Blablabla</p1>
</div>
</div>
<div class="card box-shadow">
<img class="card-img-top" src="common_house.jpg" alt="Card image cap">
<div class="card-header">
<h4 class="font-weight-normal">Common house</h4>
</div>
<div class="card-body">
<p class="card-text">Blablabla</p>
<a href="nice_flat.html" class="btn btn-primary">See more</a>
</div>
</div>
<div class="card box-shadow">
<img class="card-img-top" src="worst_house.jpg" alt="Card image cap">
<div class="card-header">
<h4 class="font-weight-normal">Worst house</h4>
</div>
<div class="card-body">
<p1>Blablabla</p1>
</div>
</div>
</div>
</div>
</div>
</div>
@Keplian You just need to add h-100
to the first div & mx-auto
to the second div in your html like so: @Keplian您只需将h-100
添加到 html 中的第一个 div 和mx-auto
到第二个 div ,如下所示:
<div class="container h-100">
<div class="row align-self-center mx-auto">
<div class="col-12 align-self-center">
<div class="card-deck mb-3 mt-3 text-center">
<div class="card box-shadow">
<img class="card-img-top" src="nice_house.jpg" alt="Card image cap">
<div class="card-header">
<h4 class="font-weight-normal">Best house</h4>
</div>
<div class="card-body">
<p1>Blablabla</p1>
</div>
</div>
<div class="card box-shadow">
<img class="card-img-top" src="common_house.jpg" alt="Card image cap">
<div class="card-header">
<h4 class="font-weight-normal">Common house</h4>
</div>
<div class="card-body">
<p class="card-text">Blablabla</p>
<a href="nice_flat.html" class="btn btn-primary">See more</a>
</div>
</div>
<div class="card box-shadow">
<img class="card-img-top" src="worst_house.jpg" alt="Card image cap">
<div class="card-header">
<h4 class="font-weight-normal">Worst house</h4>
</div>
<div class="card-body">
<p1>Blablabla</p1>
</div>
</div>
</div>
</div>
</div>
</div>
It'll center the cards horizontally.它会使卡片水平居中。 Then, you must add this to your css file:然后,您必须将其添加到您的 css 文件中:
body,html {
height: 100%;
}
You'll find the cards horizontally & vertically center now.您现在会发现卡片水平和垂直居中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.