Question

我花了更多的时间来承认尝试让一排图片成为row中可点击的链接，以便对齐row中间的图像< strong>没有破坏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删除了垂直对齐类，并从img-responsive标记中移除了Bootstrap的img类，如下所示：

<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的列是浮动的，具有css float属性。使用float，我们无法对齐列。但是我们可以使用display: inline-block。我们所需要的只是从列的样式中删除float并使用inline-block将其更改为vertical-align: middle，您将得到您想要的内容。但请不要忘记删除inline-block附带的额外空间。

这是诀窍。

＆＃13;

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

＆＃13;

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

＆＃13;

注意：在父级上设置font-size: 0; letter-spacing: -4px并在子元素上应用父级font-size: 14px; letter-spacing: 0将删除inline-block附带的空格。 < / p>

Answer 2

请尝试这个，并知道这是否是你想要的

 <style>
        img {
        height: auto;
        width: 100%;
    }

    .vertical {
        height: 100vh;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .abcd {
        min-width: 5em;
        flex: 1;
    }
    </style>

</head>

<body>
    <div class="container">
        <div class="vertical">
            <div class="abcd">

                <a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>

            </div>
            <div class="abcd">

                <a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>

            </div>
            <div class="abcd">

                <a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>

            </div>
        </div>
    </div>

</body>

Answer 3

我创建了一个小解决方法。真正的问题是<a>元素不合作。 link元素不会获得他孩子的宽度/高度，这就是提供的解决方案不起作用的原因。解决此问题的方法是使用background-image属性。使包装器具有可靠的高度和宽度，并使用background-size: contain将图像应用为背景。请参阅下面提供的小提琴。

https://jsfiddle.net/f9ogw26n/21/

.wrapper {
  height: 200px;
  width: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">
      <a href="#">
        <div class="wrapper" style="background-image:url('http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png');">
        </div>
      </a>
    </div>
    <div class="col-xs-4">
      <a href="#">
        <div class="wrapper" style="background-image:url('http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg');">
        </div>
      </a>
    </div>
    <div class="col-xs-4">
      <a href="#" title="">
        <div class="wrapper" style="background-image:url('http:////cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png')">
        </div>
      </a>
    </div>
  </div>
</div>

将图像包装在Bootstrap行中的链接中

3 个答案: