极客观点
项目管理
HarmonyOS
我花了比我愿意承认的更多的时间来尝试让一行图像成为 row 中的可点击链接，将图像对齐到 row —不要破坏 Bootstrap 的响应能力。链接工作正常，但由于图像大小的变化（尽管它们都是高度紧凑的横向），对齐方式已关闭。我可以让图像在 div.row 内垂直对齐，但它会破坏响应能力并且图像无法正确调整大小。
这是我正在尝试做的事情：
row
--------------------------------------------------------
| |
image1 | image2 | image3
| |
--------------------------------------------------------
这是我能想到的最好的：
row
--------------------------------------------------------
image1 | image2 | image3
| image2 | image3
| image2 |
--------------------------------------------------------
这个答案 正是我想要实现的，但是当我使用它的 CSS 类时，图像不会垂直居中。
我在 Bootstrap 项目中得到的图像都是紧凑的横向图像。尝试在行内垂直对齐图像
我试过的：
这是我开始的：
<div class="row vertical-align">
<div class="col-sm-4">
<a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
</div>
<div class="col-sm-4">
<a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
</div>
<div class="col-sm-4">
<a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
</div>
</div>
我可以让所有内容都以可点击链接的形式出现在一行中，但是由于图像大小的细微变化，图像不会在行的垂直中心对齐。我在普通屏幕上添加了这个 vertical-align ，但是当窗口调整大小时它会破坏 Bootstrap 的响应能力。
.vertical-align {
display: flex;
align-items: center;
}
对于我的第二次尝试，我从 --- 中删除了垂直对齐类，并从 div.row img 删除了 Bootstrap 的 img-responsive 类，如下所示：
<div class="row">
<div class="col-sm-4">
<div><a href="#"><img src="../img/my-image-1.png"></a></div>
</div>
<div class="col-sm-4">
<div><a href="#"><img src="../img/my-image-2.png"></a></div>
</div>
<div class="col-sm-4">
<div><a href="#"><img src="../img/my-image-3.png"></a></div>
</div>
</div>
在我的 CSS 文件中，我添加了这些类：
.jumbotron .row > a {
display: block;
}
.jumbotron > .row div a img {
max-height: 80px;
max-width: 100%;
vertical-align: middle;
}
上面的 CSS 类不会破坏 Bootstrap，但它们会沿着图像的顶部对齐图像，而不是在 div.row 的垂直中心。
我已经尝试了很多其他的东西，但我无法让它工作。这篇文章看起来充满希望，但我无法让它发挥作用：
我想用 CSS 和 HTML 来解决这个问题，而不是 jQuery。任何关于我正在做的事情的建议都将不胜感激。
原文由 Adrian 发布，翻译遵循 CC BY-SA 4.0 许可协议
Bootstrap 的列默认浮动，带有 css
float属性。使用float我们不能中间对齐列。但是使用display: inline-block我们可以。我们只需要从列的样式中删除float并将它们更改为inline-block和vertical-align: middle，你就会得到你想要的。但不要忘记删除inline-block附带的额外空间。这是诀窍。
注意：在父元素上设置
font-size: 0; letter-spacing: -4px并应用父元素的font-size: 14px; letter-spacing: 0返回子元素将删除inline-block附带的空白。