Bootstrap 4中的垂直对齐

Question

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

其中带有"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,有许多不同的垂直对齐方法:自动边距,flexbox utils,或display utils以及vertical align utils.起初,"vertical align utils"似乎很明显,但这些仅适用于内联和表格显示元素.以下是Bootstrap 4垂直居中选项.请记住,垂直对齐是相对于父高度.

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>

垂直中心使用自动边距演示

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>

垂直中心不同高度列演示

重要提示:要对齐的元素的直接父级必须具有已定义的高度!

3 - 垂直中心使用Display Utils:

自举4具有显示utils的,可以被用于display:table,display:table-cell,display:inline等.这些可以与使用垂直取向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>

垂直中心使用Display Utils 演示