html - 为什么 img 可点击空间包含整个 div？

Question

我有一个非常简单的问题(我什至知道它发生的原因)但我无法将其转化为我的代码。我敢肯定这是一个脑残，但我似乎无法摆脱，所以我需要一些帮助。

我在 anchor 内有一张图片，我希望它在我的屏幕上居中。我只希望图像可点击，但整个 div 当前是可点击的，它指向我的图像。我确定这是因为元素本质上是内联的，并且我的图像被设置为一个 block (出于居中目的)，因此整个 div 对于图像来说都是可点击的。但是我无法更改我的代码以使其居中并且只能单击 img 而不是整个 div。我尝试在中设置边距，在 float 中显示(除其他外)没有运气。知道我的问题出在哪里吗？谢谢!

HTML:

<div class ="resume">
         <p><h2>View Resume:</h2></p>
           <a href="assets/res.pdf" class="fancybox fancybox.iframe" title="My Resume"><img src="assets/res_preview2.jpg" /></a><br>
</div>

CSS:

.resume img{
   display: block;
   margin: 15px auto;
   box-shadow: 2px 2px 18px #232323;
}


.resume h2{
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    display: block;
}

注意:使用 fancybox 将 PDF 用作 iframe - 问题出在 jpg 上。

Answer 1

您遇到的问题是因为img 上的display: block 样式。正如一些答案所暗示的那样，简单地制作这个 display: inline-block 会删除你想要的居中。

最简单的解决方案是从图像中完全删除 display: block 样式，然后添加

.resume {
     text-align: center;
}

到您的 CSS。你可以在 this 中看到这个代码笔。父元素上的文本居中基本上将所有行为像文本的子元素居中(inline-block 等)。

如果您真的只想将图像居中，而 div.resume 中还有其他不应居中的内容，那么您需要添加一个 div 元素围绕 anchor ，然后在该元素上应用居中文本样式，如下所示:

HTML:

<div class ="resume">
    <h2>View Resume:</h2>
    <div class="text-center">        
        <a href="assets/res.pdf" class="fancybox fancybox.iframe" title="My Resume">
            <img src="assets/res_preview2.jpg" />
        </a>
    <br>
</div>

CSS:

.resume img{
   margin: 15px auto;
   box-shadow: 2px 2px 18px #232323;
}

.resume h2{
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    display: block;
}

.text-center {
    text-align: center;
}

一个 div 默认有一个 display: block 样式，所以它跨越了它包含的元素的宽度。离开 img 的显示样式然后允许它表现得像一个内联元素，它像普通文本一样居中，而不必跨越包含元素的宽度。

---

顺便说一句，您不应该将标题(例如 h2)元素放在段落元素中。严格来说，它不是正确的 HTML，所以当你使用它时，浏览器(试图纠正你)会将它变成这样:

<p></p>
<h2>View Resume:</h2>
<p></p>

参见 this所以回答。