Question

我有一个非常简单的问题（我甚至知道它为什么会发生的原因）但我无法将其转换为我的代码。我敢肯定，但是我似乎无法动摇，所以我需要一些帮助。

我想要在我想要在屏幕上居中的锚点中放置一个图像。我只希望图像可以点击，但整个div当前是可点击的，它指向我的图像。我确定这是因为元素本身就是内联的，并且我的图像被设置为一个块（fr居中目的），因此整个div对于图像来说是可点击的。但是没有什么能让我改变我的代码以保持它的中心，只有img可点击而不是整个div。我试着设置边距，浮动中的显示（除其他外）没有运气。知道我的问题出在哪里？谢谢！

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

您可能需要将a标记设置为block或inline-block，因为它包含块级元素（您将图像设置为块）。

 .resume a {
    display: inline-block;
 }

Answer 2

display：inline-block;可能适合你，也可能 .resume img a {所以它称之为锚。

Answer 3

您遇到的问题正在发生，因为display: block上的img样式。简单地将此display: inline-block作为一些答案建议将删除您想要的居中。

最简单的解决方案，因为它似乎也是标题的中心，就是从图像中完全删除display: block样式并添加

.resume {
     text-align: center;
}

到你的CSS。您可以在this CodePen中看到这一点。父元素上的文本中心基本上将所有子元素放在中心，其行为类似于文本（inline-block等）。

如果你真的想要仅仅将图像居中，div.resume中还有其他内容不应该居中，那么你需要在锚点周围添加div元素然后应用居中该元素上的文字样式如下：

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 SO回答。

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

3 个答案: