在引导行的链接中包装图像

Question

比我愿意承认试图让图像的一行是在一个可点击的链接，我花更多的时间row是在对齐的中间的图像row是不破引导响应。链接工作正常，但是由于图像尺寸的变化（尽管它们都是紧凑高度的景观），对齐方式仍然不正确。我可以使图像在中垂直对齐div.row，但是这样会破坏响应速度，并且图像的尺寸不能正确调整。

这是我尝试过的JSFiddle

这是我想做的事情：

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;
}

第二次尝试，我从中删除了垂直align类，div.row并img-responsive从img标记中删除了Bootstrap的类，如下所示：

<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。

我尝试了很多其他方法，但是无法正常工作。这篇帖子看起来充满希望，但我无法使它起作用：

如何在div中垂直对齐图像

我想用CSS和HTML来解决这个问题，而不要用jQuery。任何建议有关：我加油的事将不胜感激。

Answer 1

Bootstrap的列默认使用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在父font-size: 14px; letter-spacing: 0元素上设置父元素，并在子元素上应用父元素的后背将删除随附的空白inline-block。