Bootstrap 垂直对齐图像

Posted 2023-03-05

【中文标题】Bootstrap 垂直对齐图像

【英文标题】：Bootstrap Vertical Align Image

【发布时间】：2016-09-06 11:56:16

【问题描述】：

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

【问题讨论】：

***.com/a/28456704/1816407

请在您的问题中附上一些目标代码。如果链接的站点碰巧消失了（或者只是改变了它的内容），那么将没有关于正在发生的事情的参考。

【参考方案1】：

在包含 div.row 的内容中使用以下类，而不是引导程序 4 建议的自定义 CSS。

d-flex flex-wrap align-items-center

【参考方案2】：

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

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

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

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

请记住，为了回答这个问题，我没有包含供应商前缀，但我强烈建议您这样做，使用 Autoprefixer 等工具。

【讨论】：

请参阅下面的引导程序 4 的答案

【参考方案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。