html - 仅将居中图像作为链接，而不是整个父 div

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如果您想要具有填充和边距并强制 block 状元素中的元素内联，请使用 display:inline-block; .