我正在使用Bootstrap 4 alpha 6,并尝试使用flexbox将等高卡的内容垂直居中。我已经使用h-100 util类使卡片的高度与列相同。

问题是我希望每张卡的内容在中间对齐(垂直居中)。我尝试在行中使用.align-items-center类,该类可将卡片居中,但随后卡片的高度不再相等...

css - Bootstrap 4垂直中心-等高卡-LMLPHP

的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>


Demo of problem

最佳答案

这是一个更简单的解决方案:

仅使用justify-content-center实用程序类,因为.card已经具有flex-direction: column属性



<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>

10-05 20:55
查看更多