[英]How to align card-desk center of page
我需要解決問題以將卡片桌與大屏幕的頁面中心對齊。 I'm using Bootstrap 4. My current code here https://jsbin.com/faheheboxu/edit?html,css,output
我使用 .container 用於 flex 卡片桌,卡片放在 flex 容器中,但不知道如何垂直對齊卡片桌中心。
嘗試使用絕對高度和重量,以及填充。 但它用小屏幕破壞了彈性
<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您只需將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>
它會使卡片水平居中。 然后,您必須將其添加到您的 css 文件中:
body,html {
height: 100%;
}
您現在會發現卡片水平和垂直居中。
您可以在此處找到工作示例代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.