html – Bootstrap：如何在列中垂直居中内容

概述我现在花了几个小时来解决这个问题并阅读了无数的问题,但是所提供的解决方案都没有适用于我,所以我现在要发布我的具体问题： 我想构建一个包含四列的行.前三列中有图片,第四列有文字描述,我想垂直居中显示(意思是顶部和底部有相同的边距,显然不是固定的,但是响应于改变的屏幕尺寸).这是代码： <section> <div class="container-fluid"> <div c 我现在花了几个小时来解决这个问题并阅读了无数的问题,但是所提供的解决方案都没有适用于我,所以我现在要发布我的具体问题：

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

<section>    <div >        <div >            <div >                <img ...>            </div>            <div >                <img ...>            </div>            <div >                <img ...>            </div>            <div >                <div >                    <p>Some text that is supposed to be vertically centered within the column</p>                </div>            </div>        </div>    </div></section>

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

<div >    <p>Some text that is supposed to be vertically centered within the column</p></div>

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

非常感谢您的帮助！

解决方法 您可以使用flexBox.制作外部div,显示：flex并使用属性align-items使其内容垂直居中.这是代码：

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

总结

以上是内存溢出为你收集整理的html – Bootstrap：如何在列中垂直居中内容全部内容，希望文章能够帮你解决html – Bootstrap：如何在列中垂直居中内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。