Question

我的图像在其父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是一个可点击的链接，而不仅仅是居中的图像本身。

Answer 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;。

Answer 2

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

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

＆LT;已过时＆gt;

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

＆LT; /已过时＆gt;

Answer 3

我遇到了类似的问题，并使用针对问题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  */

Answer 4

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

仅将居中图像设为链接而不是整个父div

4 个答案: