【发布时间】：2016-06-11 17:54:44
【问题描述】：
我已经花费了比我愿意承认的时间更多的时间来尝试让一排图像成为row 中的可点击链接，该链接将图像对齐在row 中间，不会中断引导响应。链接工作正常，但由于图像大小的变化（尽管它们都是紧凑高度的景观），对齐方式已关闭。我可以让图像在div.row 内垂直对齐，但它会破坏响应性并且图像无法正确调整大小。
Here's a JSFiddle of what I've tried
这是我想要做的：
row
--------------------------------------------------------
| |
image1 | image2 | image3
| |
--------------------------------------------------------
这是我能想到的最好的：
row
--------------------------------------------------------
image1 | image2 | image3
| image2 | image3
| image2 |
--------------------------------------------------------
This answer 正是我想要实现的目标，但是当我使用其中的 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 的垂直中心。
我尝试了很多其他的东西，但我无法让它发挥作用。这篇文章看起来充满了希望，但我无法让它发挥作用：
How to vertically align an image inside div
我想用 CSS 和 HTML 来解决这个问题，而不是 jQuery。任何建议：我将不胜感激。
【问题讨论】：
-
你能拼凑一个plunker吗？
-
我有点害怕问那是什么......
-
Punker (plnkr.co) 是一个在线工具，您可以在其中创建一个正在运行的应用程序来展示您的问题。有时代码示例还不够。
-
哇！很高兴这不是城市词典的定义。我会看看我能和 plnkr.co 一起扔什么
-
@pgreen2 我提出了我遇到的问题的 jsfiddle。我尝试将
!important添加到我的 CSS 语句中，认为 Bootstrap 中有一些东西可以覆盖它，但这并没有做任何事情。
标签： html css twitter-bootstrap