Bootstrap垂直对齐图像

Question

在这个网站上:http://www.livenews.surf/我想让新闻图片和文字垂直对齐,我怎么能这样做？

Answer 1

最简单的解决方案是使用Flexbox(有关其用法的详细信息,请参阅规范).

对于这种特殊情况,请为包含div的每个内容(当前只有div)分配一个自定义类.col-md-11,例如类"content",并将此代码添加到样式表中

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

小代码说明:align-items垂直对齐项目,因为我们离开了默认的flex方向,即row,flex-wrap并允许我们的父容器将子项包装到下一行(默认为nowrap).

请记住,为了这个答案,我没有包含供应商前缀,但我强烈建议您使用Autoprefixer等工具.

Answer 2

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

d-flex flex-wrap align-items-center

Answer 3

好吧，由于您正在使用引导程序列，因此您需要按照以下说明的几个步骤进行操作：

通常，网页的html结构如下：

<div class="col-md-11">
    <div class="col-md-5">
        <a href="#">
            <img src="images/image.jgp">
        </a>
    </div>
    <div class="col-md-7">
       // text goes here
    </div>
</div>

首先，您需要使两列的高度（图像+文本）相同。为此，您可以使用jQuery matchHeight。之后，您可以借助以下更改使图像垂直居中。

<div class="col-md-5 photo">
    <a href="#">
        <img src="images/image.jgp">
    </a>
</div>

.photo {
    display: table;
}
.photo a {
    vertical-align: middle;
    display: table-cell;
}
.photo img {
    display: block;
    height: auto;
    width: 100%;
}

这是Plnkr。