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元素上的<style> div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 40%; height: auto; padding-top: 5px; } div.desc { padding: 15px; text-align: center; color: #343434; text-transform: lowercase; font-family: "Mplus 1p"; font-size: 10px; text-align: center; letter-spacing: 1px; word-spacing: 3px; } .flex-center { display: flex; justify-content: center; } </style> </body> <div class="gallery"> <a target="_blank" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS" alt="pretty pretty" style="margin:auto; display:block" width="400px" height="400px"> </a> <div class="desc">ulzzang </div> 类之一，或.col元素上的align-items-...。

对于OP的原始请求，最佳实现将是

align-self-...

例如，如果你想将所有的.col元素设置为垂直对齐 bottom ，你可以设置<div class="col-md-6 align-self-center"> <div class="title"> to be centered vertically </div> </div> .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（）以检查窗口的宽度，以便不对较小的屏幕执行