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）。

非常感谢您的帮助！

原文由 tinymarsracing 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以使用弹性盒子。使您的外部 div , display: flex 并使用属性 align-items 使其内容垂直居中。这是代码：

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

原文由 Soheil Pourbafrani 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 MrOrhan 发布，翻译遵循 CC BY-SA 4.0 许可协议