问题描述
我正在使用Bootstrap 4 alpha 6,并尝试使用flexbox将等高卡的内容垂直居中.我已经使用h-100
util类使卡片的高度达到了列的水平.
I'm using Bootstrap 4 alpha 6, and attempting to use flexbox to vertically center the content of equal height cards. I've used the h-100
util class to make the cards full height with the columns..
问题是我希望每张卡的内容在中间对齐(垂直居中).我尝试在行中使用.align-items-center
类,该类可以使卡片居中,但随后卡片的高度不再相等...
The problem is that I want the content of each card to be aligned in the middle (centered vertically). I tried the use the .align-items-center
class in the row, which works to center the cards, but then the cards are no longer equal height...
HTML
<div class="container">
<div class="row align-items-center bg-faded">
<div class="col-md-2">
<div class="card card-block h-100">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100">
I have a little bit.
</div>
</div>
</div>
</div>
推荐答案
这是为您提供的更简单的解决方案:
Here is a simpler solution for you:
仅使用justify-content-center
实用程序类,因为.card
已经具有flex-direction: column
属性
using only justify-content-center
utility class because .card
has already flex-direction: column
property
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<code>normal .row with .card inside .col-*</code>
<h6>Problem is that card content is not centered</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a little bit.
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<code>.align-items-center.row with .card inside .col-</code>
<h6>Problem is that cards are no longer full height</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
这篇关于Bootstrap 4垂直居中-等高卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!