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中。通过在max-width上设置display:inline-block和a，您可以确保内容不会展开。

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

图像链接占据列的宽度

1 个答案: