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

您可以使用flexbox。设置您的外部div，display: flex并使用属性align-items使其内容垂直居中。这是代码：

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

Answer 2

以下代码将项目完美地放在div中：

display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
justify-content: center;

Answer 3

您需要做的就是在CSS下面添加以下代码段。

就像这样。

.row{ display: flex; align-items: center;}

我尝试了相同的代码并得到了输出。如果你想看，请下载文件并运行它。

https://www.dropbox.com/s/0x7iqi6alayd8xg/VerticallyCentered.html?dl=0

Answer 4

在Bootstrap 4中，将“ align-self-center”类添加到col，以使内容垂直居中。

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

4 个答案: