Bootstrap 垂直对齐图像

Question

在这个网站上： http ://www.livenews.surf/ 我想使新闻图像和文本垂直居中对齐，我该怎么做？

原文由 Gonçalo Loureiro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最简单的解决方案是使用 Flexbox（有关其用法的更多详细信息，请参阅规范）。

对于这种特殊情况，为每个包含 div 的内容分配一个自定义类（目前它只有 .col-md-11 ），例如类“content”并将此代码添加到您的样式表

.content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

小代码解释： align-items 垂直对齐项目，因为我们保留了默认的 flex 方向，即行和 flex-wrap 将允许我们的父容器将子容器包装到下一行（默认为 nowrap ）。

请记住，为了这个答案， 我没有包含供应商前缀，但是我强烈建议您使用诸如 Autoprefixer 之类的工具这样做。

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

Answer 2

在包含 div.row 中使用以下类，而不是为 bootstrap 4 建议的自定义 CSS。

d-flex flex-wrap align-items-center

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