Question

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

Answer 1

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

对于这种特殊情况，请为包含div的每个内容指定一个自定义类（目前只有.col-md-11），例如class＆＃34; content＆＃34;并将此代码添加到样式表

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

小代码说明：align-items垂直对齐项目，因为我们离开了默认的flex方向，即行，flex-wrap将允许我们的父容器将子项包装到下一行（默认为{{1 }}）。

请注意，为了这个答案，我还没有包含供应商前缀，但我强烈建议您使用Autoprefixer等工具。

Answer 2

在包含div.row的目录中使用以下类，而不是引导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。

Bootstrap垂直对齐图像

3 个答案: