html - 图片链接占用列宽

Question

这与 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.]

具有各种“显示”样式。但我无法让图像既在列中居中，又不会让链接溢出图像。

Answer 1

据我所知，您正在尝试使 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>