Bootstrap网格中的垂直对齐

Question

这似乎是一个简单的问题，但我根本找不到答案。

这个小提琴应该相当简单：http://fiddle.jshell.net/52VtD/4040/

<div class="panel panel-default entete" >
    <div class="row">
        <div class="col-md-6">
            <div class="title">
               to be centered vertically
            </div>
        </div>
        <div class="col-md-2">
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
        </div>
        <div class="col-md-2">
            Text
        </div>
        <div class="col-md-2">
            Text
        </div>
    </div>
</div>

我试图垂直对齐第一列的内容相对于其他列。

如果调整窗口大小（并且右侧没有列），则第一列应该与其内容一样高（不能使用固定高度）。

Answer 1

看看这个http://fiddle.jshell.net/52VtD/4043/

<div class="panel panel-default entete" >
    <div class="row" style="display:table">
        <div class="col-md-6" >
            <div class="title" style="display:cell;vertical-align:middle">
               to be centered vertically
            </div>
        </div>
        <div class="col-md-2">
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
        </div>
        <div class="col-md-2">
            Text
        </div>
        <div class="col-md-2">
            Text
        </div>
    </div>
</div>

Answer 2

使用Bootstrap 4 Grid执行此操作的正确方法是使用.row元素上的align-items-...类之一，或.col元素上的align-self-...。

在OP的原始请求的情况下，最好的实现将是

<div class="col-md-6 align-self-center">
    <div class="title">
       to be centered vertically
    </div>
</div>

例如，如果您希望将所有.col元素设置为垂直对齐，则可以在.row元素上设置align-items-end，如下所示：

<div class="row align-items-end">

资料来源：https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment

Answer 3

http://fiddle.jshell.net/8uzn7fou/2/

HTML：

<div class="panel panel-default entete" >
    <div class="row" >
        <div class="col-md-6 title_div" >
            <div class="title" >
                to be centered vertically<br/> to be centered vertically
            </div>
        </div>
        <div class="col-md-2">
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
        </div>
        <div class="col-md-2">
            Text 2
        </div>
        <div class="col-md-2">
            Text 3
        </div>
    </div>
</div>

CSS：

.title_div{
    display: table;

}
.title{
    height:100%; display: table-cell!important;
    vertical-align: middle;
}

JQ：

function setHeight()
{
    var max=0;
    $('.entete .col-md-2').each(function(){
        var h=$(this).height();
        if(h>max) max=h;
    })

    $('.title_div').height(max);
}

setHeight()

注意：在函数中，应添加setHeight（）以检查窗口的宽度，以便不对较小的屏幕执行