html - 在 Bootstrap 行的链接中包装图像

Question

我花了比我愿意承认的更多的时间试图让一行图像成为 row 中的可点击链接。将图像对齐在 row 的中间不会破坏 Bootstrap 的响应能力。链接工作正常，但由于图像大小的变化(尽管它们都是高度紧凑的横向)，对齐方式已关闭。我可以让图像在 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 中删除了垂直对齐类并删除了 Bootstrap 的 img-responsive来自 img 的类(class)标签，如下:

<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。任何关于我正在做的事情的建议都将不胜感激。

Answer 1

Bootstrap 的列默认是 float 的，带有 css float 属性。使用 float，我们不能中间对齐列。但是使用 display: inline-block 我们可以。我们只需要从列的样式中删除 float 并将它们更改为 inline-block 和 vertical-align: middle 就可以了你要。但不要忘记删除 inline-block 附带的额外空间。

这是诀窍。

.vertical-align {
  letter-spacing: -4px;
  font-size: 0;
}

.vertical-align .col-xs-4 {
  vertical-align: middle;
  display: inline-block;
  letter-spacing: 0;
  font-size: 14px;
  float: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="jumbotron">
    <div class="row vertical-align">
      <div class="col-xs-4">
        <a href="#" title=""><img src="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png" class="img-responsive"></a>
      </div>
    <div class="col-xs-4">
        <a href="#" title=""><img src="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png" class="img-responsive"></a>
    </div>
    <div class="col-xs-4">
        <a href="#" title=""><img src="http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg" class="img-responsive"></a>
    </div>    
  </div>
</div>
</div>

注意:设置font-size: 0; letter-spacing: -4px on parent 并应用父级的 font-size: 14px; letter-spacing: 0 返回子元素将删除 inline-block 附带的空白。