bootstrap-4 - Bootstrap 4中的垂直对齐

Question

我在Bootstrap 4中进行了以下设置:Bootply link

其中带有“Supplier”文本的元素应垂直居中，我具有相同代码的不同行，并且希望它们居中。似乎没有解决方案适合我。

这里有人可以找出我做错了什么，并指出正确的方向吗？

谢谢。

Answer 1

您可以像这样使用flex-xs-middle类。

Bootstrap 4 Alpha 5

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
         <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
</div>

http://www.codeply.com/go/PNNaNCB4T5(使用启用了Bootstrap 4 flexbox的CSS)

bootstrap 4

Bootstrap 4.0.0的更新

现在，Bootstrap 4是默认的 flexbox ，现在有许多不同的垂直对齐方法可以使用:auto-margins，flexbox utils或display utils以及vertical align utils。乍一看，“vertical align utils”似乎很明显，但它们仅适用于内联和表显示元素。以下是Bootstrap 4垂直居中选项。 请记住，垂直对齐是相对于parent height的。

1-使用自动边距的垂直中心:

垂直居中的另一种方法是使用my-auto。这将使元素在容器内居中。例如，h-100使行全高，并且my-auto将使col-sm-12列垂直居中。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertical Center Using Auto Margins Demo
my-auto表示垂直y轴上的边距，它等效于:

margin-top: auto;
margin-bottom: auto;

2-带Flexbox的垂直中心:



由于Bootstrap 4 .row现在是display:flex，因此您可以在任何列上简单地使用align-self-center使其垂直居中...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

或者，在整个align-items-center上使用.row垂直居中对齐行中的所有col-* ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Vertical Center Different Height Columns Demo

重要:direct parent of the element to be aligned must have a defined height!

3-使用显示实用程序的垂直居中:

Bootstrap 4具有display utils，可用于display:table，display:table-cell，display:inline等。它们可与vertical alignment utils一起使用以对齐内联，内联块或表格单元格元素。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Vertical Center Using Display Utils Demo