Html 将图像包装在 Bootstrap 行中的链接中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37692267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrapping an image in a link in a Bootstrap row
提问by Adrian
I've spent more time than I care to admit trying to get a row of images to be clickable links in a rowthat aligns the images in the middle of the rowthat doesn't break Bootstrap responsiveness. The links work fine, but the alignment is off, due to variations in the sizes of the images (though they're all compact-height landscape). I can get the images to align vertically within div.row, but it breaks responsiveness and images don't resize properly.
比我愿意承认试图让图像的一行是在一个可点击的链接，我花更多的时间row是在对齐的中间的图像row是不破引导响应。链接工作正常，但由于图像大小的变化（尽管它们都是紧凑高度的风景），因此对齐已关闭。我可以让图像在 内垂直对齐div.row，但它会破坏响应能力并且图像无法正确调整大小。
Here's a JSFiddle of what I've tried
Here's what I'm trying to do:
这是我想要做的：
row
--------------------------------------------------------
| |
image1 | image2 | image3
| |
--------------------------------------------------------
Here's the best I can come up with:
这是我能想到的最好的：
row
--------------------------------------------------------
image1 | image2 | image3
| image2 | image3
| image2 |
--------------------------------------------------------
This answeris exactly what I'm trying to achieve, however the images don't vertically center for me when I use the CSS classes from it.
这个答案正是我想要实现的，但是当我使用它的 CSS 类时，图像不会垂直居中。
I've got images that are all compact landscape images on a Bootstrap project. Trying to align the images vertically within the row
我在 Bootstrap 项目中得到的图像都是紧凑的风景图像。尝试在行内垂直对齐图像
What I've tried:
我试过的：
Here's what I started with:
这是我的开始：
<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>
I can get everything to appear in a row as a clickable link, but due to slight variations in sizes of the images, the images do not align in the vertical center of row. I added this vertical-alignon a normal screen, but it breaks Bootstrap's responsiveness when the window resizes.
我可以将所有内容作为可点击链接排成一行，但由于图像大小略有不同，图像不会在行的垂直中心对齐。我vertical-align在普通屏幕上添加了这个，但是当窗口调整大小时它会破坏 Bootstrap 的响应能力。
.vertical-align {
display: flex;
align-items: center;
}
For my second attempt, I removed the vertical align class from the div.rowand removed Bootstrap's img-responsiveclass from the imgtag, as follows:
对于我的第二次尝试，我从标签中删除了垂直对齐类，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>
In my CSS file, I added these classes:
在我的 CSS 文件中，我添加了这些类：
.jumbotron .row > a {
display: block;
}
.jumbotron > .row div a img {
max-height: 80px;
max-width: 100%;
vertical-align: middle;
}
The CSS classes above don't break Bootstrap, but they align the images along the tops of them, not in the vertical center of the div.row.
上面的 CSS 类不会破坏 Bootstrap，但它们将图像沿图像顶部对齐，而不是在div.row.
I've tried a bunch of other stuff, but I can't get it to work. This post looked filled with promise, but I couldn't get it to work:
我已经尝试了很多其他的东西，但我无法让它工作。这篇文章看起来充满了希望，但我无法让它发挥作用：
How to vertically align an image inside div
I'd like to get this figured out with CSS and HTML, no jQuery. Any suggestions re: what I'm ****ing up would be greatly appreciated.
我想用 CSS 和 HTML 来解决这个问题，而不是 jQuery。任何建议回复：我正在做的事情将不胜感激。
采纳答案by Mohammad Usman
Bootstrap's columns are floating by default with css floatproperty. With floatwe can't middle align columns. However with display: inline-blockwe can. All we need is to remove floatfrom styles of columns and change them to inline-blockwith vertical-align: middleand you will get what you want. But don't forget to remove extra space that comes with inline-block.
Bootstrap 的列默认是浮动的，带有 cssfloat属性。有了float我们不能中间对齐列。但是display: inline-block我们可以。我们所需要的只是float从列的样式中删除并将它们更改为inline-blockwith vertical-align: middle，您将获得所需的内容。但不要忘记删除附带的额外空间inline-block。
Here is the trick.
这是诀窍。
.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>Note: Setting font-size: 0; letter-spacing: -4pxon parent and applying parent's font-size: 14px; letter-spacing: 0back on child elements will remove white space that comes with inline-block.
注意：font-size: 0; letter-spacing: -4px在父font-size: 14px; letter-spacing: 0元素上设置并在子元素上应用父元素将删除inline-block.
回答by Rinku Bhilota
please try this and lemme know if this is what you wanted
请试试这个，让我知道这是否是你想要的
<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>
回答by Luuk Skeur
I have created a little workaround. The real problem is that the <a>element is not cooperating. The link element won't obtain the width/height of his child, that is why the solution provided does not work. A workaround to this is to use the background-imageproperty. Giving a wrapper a solid height and width and apply the image as background using background-size: contain. See the fiddle provided below.
我已经创建了一些解决方法。真正的问题是<a>元素不合作。link 元素不会获得他孩子的宽度/高度，这就是提供的解决方案不起作用的原因。对此的解决方法是使用该background-image属性。为包装器提供固定的高度和宽度，并使用background-size: contain. 请参阅下面提供的小提琴。
https://jsfiddle.net/f9ogw26n/21/
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>