我需要解决问题才能将名片桌与大屏幕的页面中心对齐。我正在使用Bootstrap 4。 我当前的代码在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>
答案 0 :(得分:0)
@Keplian您只需要在HTML中将h-100
添加到第一个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%;
}
您现在将在水平和垂直居中位置找到卡片。
您可以找到有效的示例代码here。