Bootstrap垂直对齐图像

Question

我想在这个网站上http://www.livenews.surf/ 将新闻图片和文字垂直居中对齐，该如何实现？

- Gonçalo Loureiro

---

https://dev59.com/zF4b5IYBdhLWcg3w-1-c#28456704 - MakeLoveNotWar

请在您的问题中附上一些目标代码。如果链接的网站不幸消失（或只是更改了其内容），那么就没有参考信息可以知道发生了什么。 - Aritz

Answer 1

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

d-flex flex-wrap align-items-center

- jcaruso

Answer 2

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

对于这种情况，为每个包含内容的div分配一个自定义类（当前仅有.col-md-11），例如类"content"，并将此代码添加到您的样式表中。

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

小代码解释：align-items可以使项目垂直对齐，因为我们保留了默认的 flex 方向，即行，并且flex-wrap会允许父容器将子元素换行（默认为nowrap）。

请注意，出于答案的考虑，我没有包括供应商前缀，但我强烈建议您使用 Autoprefixer 等工具添加前缀。

- Leo Napoleon

---

请参见以下Bootstrap 4的内容： - jcaruso

Answer 3

嗯，由于您正在使用bootstrap列，因此您需要按照以下几个步骤进行制作：

通常情况下，网页的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。

- Mohammad Usman

---

你确定 col-md-5 应该直接放在 col-md-11 下面吗？据我所知，Bootstrap 不是这样工作的。你需要至少在它们之间加一个 row。 - Eric

@Eric 你说得对。我已经纠正了模板。感谢你指出这个问题。 - Mohammad Usman