在引导程序行的链接中包装图像 [英] Wrapping an image in a link in a Bootstrap row
问题描述
我花了比我要承认的时间更多的时间，试图在行中使一行图像成为可点击的链接，以使图像在中间对齐。 不会破坏Bootstrap响应能力的行 。链接可以正常工作，但是由于图像尺寸的变化（尽管它们都是紧凑高度的景观），对齐方式仍然不正确。我可以使图像在 div.row 内垂直对齐，但是这样会破坏响应速度，并且图像无法正确调整大小。
这是我要尝试的操作：
行
------------------------------------------------- -------
| |
image1 | image2 | image3
| |
---------------------------------------------- ----------
这是我想出的最好的方法：
行
----------------------- ---------------------------------
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-sensitive>< / a> ;
< / div>
< div class = col-sm-4>
< a href =＃ title =>< img src = ../ img / my-image-1.png class = img-sensitive>< / a> ;
< / div>
< div class = col-sm-4>
< a href =＃ title =>< img src = ../ img / my-image-1.png class = img-sensitive>< / a> ;
< / div>
< / div>
我可以使所有内容作为可点击链接连续显示，但是由于尺寸略有变化在图像中，图像未在行的垂直中心对齐。我在正常屏幕上添加了 vertical-align ，但是当窗口调整大小时，它破坏了Bootstrap的响应能力。
.vertical-align {
display：flex;
align-items：center;
}
第二次尝试，我从<$ c中删除了垂直对齐类$ c> div.row 并从 img 标记中删除了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> {{
display：block;
}
.jumbotron> .row div a img {
max-height：80px;
最大宽度：100％；
vertical-align：middle;
}
上面的CSS类不会破坏Bootstrap，但它们会沿图像对齐它们的顶部，而不是在 div.row 的垂直中心。
我试过一堆其他东西，但我无法使其正常工作。这篇帖子看起来充满了希望，但我无法使它起作用：
我想要这个弄清楚了CSS和HTML，没有jQuery。任何建议：我加油的东西将不胜感激。
Bootstrap的列默认情况下是浮动的css float 属性。使用 float ，我们无法对列进行中间对齐。但是，通过 display：inline-block 我们可以。我们需要做的是从列样式中删除 float 并将其更改为 inline-block 和 vertical-align：middle ，您将得到想要的东西。但是不要忘记删除 inline-block 附带的多余空间。
这是诀窍。 / p>
.vertical-align {字母间距：-4px; font-size：0;}。vertical-align .col-xs-4 {vertical-align：middle;显示：inline-block;字母间距：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响应>< ; / 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响应>< ; / a> < / div> < div class = col-xs-4> < a href =＃ title =>< img src = http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg class = img响应> ;< / a> < / div> < / div>< / div>< / div>
注：设置 font-size：0;父级上的字母间距：-4px ，并应用父级的 font-size：14px； letter-spacing：在子元素上返回0 将删除 inline-block 附带的空白。
I've spent more time than I care to admit trying to get a row of images to be clickable links in a row that aligns the images in the middle of the row that 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.
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 answer is exactly what I'm trying to achieve, however the images don't vertically center for me when I use the CSS classes from it.
I've got images that are all compact landscape images on a Bootstrap project. Trying to align the images vertically within the row
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-align on a normal screen, but it breaks Bootstrap's responsiveness when the window resizes.
.vertical-align {
display: flex;
align-items: center;
}
For my second attempt, I removed the vertical align class from the div.row and removed Bootstrap's img-responsive class from the img tag, as follows:
<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:
.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.
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.
Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with 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: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.
这篇关于在引导程序行的链接中包装图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
