Bootstrap 垂直对齐图像

Question

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

Answer 1

在包含

div.row

中使用以下类，而不是按照 bootstrap 4 的建议使用自定义 CSS。

d-flex flex-wrap align-items-center

Answer 2

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

对于这种特殊情况，为每个包含 div 的内容分配一个自定义类（目前它只有

.col-md-11

），例如类“content”并将此代码添加到您的样式表

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

小代码解释：

align-items

垂直对齐项目，因为我们保留了默认的 flex 方向，即行，

flex-wrap

将允许我们的父容器将子容器包装到下一行（默认为

nowrap

）。

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

Answer 3

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

一般情况下你的网页html结构如下：

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