这与 this question, 非常相似但这个答案对我不起作用。
我有一排图片,我希望图片可以点击。这是我的代码:
<div class="row">
<div class="col-lg-4">
<h2 align="center"><a href="#">Education and Outreach</a></h2>
<a href="#" style="width:225px;"><img class="img-responsive center-block" src="../img/outreach_small.JPG" style="width:225px;height:228px;" alt="Several remote-sensing-related words on a black background."></a>
<br></br>
</div>
<div class="col-lg-4">
<h2 align="center"><a href="#">Imagery</a></h2>
<a href="#" style="width:225px;"><img class="img-responsive center-block" src="../img/earth.png" style="width:225px;height:228px;" alt="A satellite image of the Earth."></a>
<br></br>
</div>
<div class="col-lg-4">
<h2 align="center"><a href="#">Remote Sensing Resources</a></h2>
<a href="#" style="width:225px;"><img class="img-responsive center-block" src="../img/dataresources.jpg" style="width:225px;height:228px;" alt="stylized stream of zeroes and ones emanating from a central globe."></a>
<br></br>
</div>
</div>
这是我想要的样子。红线表示链接边界应该在的位置——即仅在图像上方(以便图像可点击)。
但是链接占据了每个图像的整个列宽。这是链接当前的样子(除了没有红线):
我试过
<a href="#" style="width:225px; display=block;"><img class= ... [etc.]
具有各种“显示”样式。但我无法让图像既在列中居中,又不会让链接溢出图像。
最佳答案
据我所知,您正在尝试使 img
和 H2
可点击,并使每个包含“单元格”的内容居中,确保文本不会超出宽度它的形象。
我在这里所做的是删除重复的 a
并将 h2
和 img
放在剩余的 a 中
。
通过在a
上设置一个max-width
和display:inline-block
,可以保证内容不会展开。
.col-lg-4 {display:inline-block;}
a {
display:inline-block;
text-align:center;
max-width:225px;
}
<div class="row">
<div class="col-lg-4">
<a href="#">
<h2 align="center">Education and Outreach</h2>
<img class="img-responsive center-block" src="http://via.placeholder.com/225x228" style="width:225px;height:228px;" alt="Several remote-sensing-related words on a black background.">
</a>
<br />
</div>
<div class="col-lg-4">
<a href="#"><h2 align="center">Imagery</h2>
<img class="img-responsive center-block" src="http://via.placeholder.com/225x228" style="width:225px;height:228px;" alt="A satellite image of the Earth."></a>
<br />
</div>
<div class="col-lg-4">
<a href="#"><h2 align="center">Remote Sensing Resources</h2>
<img class="img-responsive center-block" src="http://via.placeholder.com/225x228" style="width:225px;height:228px;" alt="stylized stream of zeroes and ones emanating from a central globe."></a>
<br />
</div>
</div>
关于html - 图片链接占用列宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45821169/