如何垂直对齐当前正在使用列中的引导 4 类 img-fluid 的图像？

Posted 2023-03-06

【中文标题】如何垂直对齐当前正在使用列中的引导 4 类 img-fluid 的图像？

【英文标题】：How can I vertically align images that are currently using the bootstrap 4 class img-fluid which are in columns?

【发布时间】：2018-05-10 16:27:16

【问题描述】：

我正在使用引导列，每个列都有一个不同尺寸的图像，这些图像在全屏视图上对齐，但是当使用引导的类 img-fluid 时，它们会调整大小以适应更小的视口，而不是在其他图像之间垂直对齐更小的图像最终出现在他们的 div 列的顶部。

有没有办法在图像缩小时垂直对齐这些图像？

这里是标记：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-2">
        <img src="http://via.placeholder.com/350x150" class="d-block img-fluid">
    </div>
    <div class="col-2">
        <img src="http://via.placeholder.com/300x150" class="d-block img-fluid">
    </div>
    <div class="col-2">
        <img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
    </div>
    <div class="col-2">
        <img src="http://via.placeholder.com/200x100" class="d-block img-fluid">
    </div>
    <div class="col-2">
        <img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
    </div>
    <div class="col-2">
        <img src="http://via.placeholder.com/150x150" class="d-block img-fluid">
    </div>
</div>

【参考方案1】：

当您使用引导程序 4 时，只需在您的 row 中添加 align-items-center 类

更多帮助请阅读Bootstrap4 Flex Grid

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row align-items-center">
  <div class="col-2">
    <img src="http://via.placeholder.com/350x150" class="d-block img-fluid">
  </div>
  <div class="col-2 align-items-center">
    <img src="http://via.placeholder.com/300x150" class="d-block img-fluid">
  </div>
  <div class="col-2">
    <img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
  </div>
  <div class="col-2">
    <img src="http://via.placeholder.com/200x100" class="d-block img-fluid">
  </div>
  <div class="col-2">
    <img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
  </div>
  <div class="col-2">
    <img src="http://via.placeholder.com/150x150" class="d-block img-fluid">
  </div>
</div>