仅使居中的图像成为链接而不是整个父 div答案

【问题标题】：Only make a centered image a link instead of the whole parent div仅使居中的图像成为链接而不是整个父 div
【发布时间】：2015-07-10 18:59:18
【问题描述】：

我的图像在其父 div 中居中，我只希望图像是可点击的链接，而不是整个 div 本身。我不太确定问题是什么，所以任何帮助将不胜感激。

这是我的代码：

HTML：

    <div class="banner_column">
        <a href="#">
        <img src="images/image1.png" alt="Image 1" >
        </a>
        <h1>Check Out Link Above</h1>
        <p>Some text here</p>
    </div>

CSS：

.banner_column {
   width:25%;
   display:inline-block;
   float:left;
   margin-bottom:60px;
}

.banner_column img {
   display:block;
   width:300px;
   height:450px;
   position:relative;
   margin-top:30px;
   margin-left:auto;
   margin-right:auto;
}

问题是整个列 div 是一个可点击的链接，而不仅仅是居中的图像本身。

【问题讨论】：

当我在 JSFiddle 上运行时，只有图片是可点击的链接。

标签： html css

【解决方案1】：

定位<a> 标签而不是<img> 标签。还有一个小笔记记得把/>放在你的<img>标签的末尾。

   .banner_column {
       width:25%;
       display:inline-block;
       float:left;
    }

.banner_column a{
    display:inline-block;
    margin:30px auto 60px auto;
    width:300px;
    height:450px;
}

.banner_column img {
    width:100%;
    /*don't worry about height it will auto size*/
}


 <div class="banner_column">
    <a href="#">
        <img src="images/image1.png" alt="Image 1" />
    </a>
    <h1>Check Out Link Above</h1>
    <p>Some text here</p>
</div>

display:block 每次都会占据父元素的整个宽度。如果你希望它是内联的，那么使用display:inline 如果你想要填充和边距并强制块中的元素像元素一样内联使用display:inline-block;。

【讨论】：

【解决方案2】：

也许您可以将a 设置为居中而不是图像，那么您将不会有触发链接的左右边距。

.banner_column a {
   display:block;
   width:300px;
   height:450px;
   position:relative;
   margin:30px auto 0 auto;
}

【讨论】：

我刚才居然找到了解决办法。我保留了与上面相同的原始代码，但添加了以下 CSS： .banner_column a {display:block;边距：0 自动； width:300px;} 从这个 [post] stackoverflow.com/questions/21617152/…987654321@ 找到解决方案
啊。好吧，为你高兴。继续，让它成为答案所以这篇文章被关闭了。 :)
可以放下位置：相对；标签默认是相对的。

【解决方案3】：

编辑：使用 Sergiy 的解决方案，为 a 标签添加样式。

.banner_column a {
   display:block;
   width:300px;
   height:450px;
   position:relative;
    margin:30px auto 0 auto;
}
.banner_column {
  width: 25%;
  display: inline-block;
  float: left;
  margin-bottom: 60px;
}
.banner_column img {
  display: block;
  width: 300px;
  height: 450px;
  position: relative;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}

<div class="banner_column">
  <a href="#">
    <img src="image.png" alt="Image 1"/>
  </a>
  <h1>Check Out Link Above</h1>
  <p>Some text here</p>
</div>

https://jsfiddle.net/d3euvpr9/

我刚刚尝试过，您的代码在 chrome 上运行时运行良好。你真的有一个失败的小提琴吗？因为正如 BlackHatSamurai 所评论的那样，这段代码运行良好。试试关闭 img 标签吧？

【讨论】：

这不是你应该关闭img标签的方式......而是`（在XHTML中）。在 HTML5 中，这甚至被认为是无效的，因为 img 标签是“无效元素”，不应关闭
我的错。通常永远不要关闭它们，因为它与我的经验没有任何冲突。但这是我能看到的唯一可能与预期输出不同的东西。在我的答案中更新
@Bartdude 虽然确实最好不要担心关闭它，因为它是一个“空元素”，但您可以关闭 img 标记 <img></img> 或 <img />。 stackoverflow.com/a/14860596/756329
@Khaldor 我试着玩弄你的小提琴，虽然图像是可点击的，但图像周围的边距也是可点击的。假设您将并且图像使用居中，您会注意到边距也是可点击的。我想知道我如何只能让图像可点击而不是边距。
使用@SergiyT。解决方案。可以很好地去除边距。是的，不明白您不想要页边距，实际上认为您将文本显示为链接。

【解决方案4】：

我遇到了类似的问题，并使用以下针对问题 DIV 的 CSS 进行了修复：

#projects {pointer-events: none;} /* prevents the whole div from containing links */

#projects img {pointer-events: all;} /* restores links on just images within the div  */

【讨论】：

【解决方案5】：

 <img href="your href id" src="images/image1.png" alt="Image 1" > and remove the img in <a>

【讨论】：

虽然代码很受欢迎，但它应该总是有一个附带的解释。这不必很长，但在意料之中。