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 used.container for flex, card-desk with cards in flex container, but don't know how align card-desk center vertically.
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:
<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:
body,html {
height: 100%;
}
You'll find the cards horizontally & vertically center now.
You can find a working sample code here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.