Bootstrap:如何在列中垂直居中内容

Question

我现在花了几个小时来解决这个问题并阅读了无数的问题,但是所提供的解决方案都没有适合我,所以我现在要发布我的具体问题:

我想构建一个包含四列的行.前三列中有图片,第四列有文字描述,我想垂直居中显示(意思是顶部和底部有相同的边距,显然不是固定的,但是响应于改变的屏幕尺寸).这是代码:

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-4 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-3 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-1 col-sm-6">
                <div class="container-fluid">
                    <p>Some text that is supposed to be vertically centered within the column</p>
                </div>
            </div>
        </div>
    </div>
</section>

它必须对Bootstrap特定的类做一些事情,而不是基于CSS的解决方案,我可以在这个上找到它.如何在这个特定的例子中使它工作？您可以随意对此部分进行任何更改:

<div class="container-fluid">
    <p>Some text that is supposed to be vertically centered within the column</p>
</div>

但是,如果可能,结构的其余部分应保持不变(包括col-lg-1).

非常感谢您的帮助!

Answer 1

在 Bootstrap 4 中，将“align-self-center”-class 添加到 col，您希望内容垂直居中。

Answer 2

您可以使用flexbox.使你的外部div,display: flex并使用该属性align-items使其内容垂直居中.这是代码:

#outerDiv{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}