将带有链接的图像居中答案

【问题标题】：center an image with a link on it将带有链接的图像居中
【发布时间】：2012-05-10 21:48:27
【问题描述】：

是否可以仅通过将类设置为img 标签来使图像居中而没有副作用？问题如下：我在图像周围有一个锚点。如果我使用以下 CSS

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

还有这个（精简的）HTML：

<a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
    <img src="/path/to/image.jpg" title="System" class="aligncenter">
</a>

链接占据主 div 的整个宽度。这意味着不仅图像是可点击的——图像周围的空间（实际上是整个宽度）也是可点击的。这是通过 CSS display: block。

如何在不使用父 div 的情况下使图像居中？我不希望整个区域都可以点击。

背景：你可以阅读this topic。它是关于 Wordpress 和内置编辑器的。他自动在图像上生成类aligncenter（如果用户按下中心按钮）。我需要这个作为我自己的主题。根据版主的说法，这应该只是一个 CSS 问题，与更改 Wordpress 中的代码无关。

【问题讨论】：

标签： css image wordpress editor center

【解决方案1】：

第二个答案：
将此粘贴到functions.php

add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
    // only do this on center
    if($align == 'center') {
        $html = str_replace('aligncenter', '', $html);
        $html = '<p style="width: 100%; text-align: center;" >'.$html.'</p>';
    }
    return $html;
}

不利的一面，这不会影响已插入的图像...
另外，如果可以，请将<p> 的样式移到样式表中。

【讨论】：

这对我不起作用。目前，我可以使用 fancybox 类的样式，但我不知道会对其他链接产生哪些副作用。
尝试添加到a style float:left
如果我使用您的代码，图像居中，但图像周围仍有可点击区域。
啊，你不想这样……等一下
是的，我知道......我想如果不更改一些 Wordpress 代码，我就无法解决问题。但是我想知道一个主题开发者是如何正常处理这种情况的。

【解决方案2】：

在 aligncenter 类中添加 text-align:center

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

【讨论】：

这并没有改变什么。

【解决方案3】：

我不熟悉 wordpress，但您可能想尝试将图像和锚点的 css 'display' 属性设置为 'inline-block'。

如果您在更改文档的 DOM 方面受到限制，另一种选择是向图像添加“onClick”属性。
这将允许您在单击图像后运行某些功能。
因此，例如，如果您想重定向到另一个页面：

<img src='myImg.png' onclick='myRedirect()' style='cursor:pointer'/>

在页面的标题中：

<script type='text/JavaScript'>
    var myRedirect = function(){
        window.location.href = 'Some other location';
    }
</script>

注意style='cursor:pointer'，它将鼠标光标变为“手形”光标。

【讨论】：

您想通过使用 javascript 来回答这个问题，但可以仅使用 css 来完成。还有一个<a> 标签，用于您所知道的链接。
该链接仅用于使用fancybox（用于缩略图的完整版本）。不知道在这种情况下您的代码会是什么样子。接下来是我如何附加 onclick 事件？又是 JS 吗？
@janw，可能，但由于原始问题发布者无法用 html+css 解决（同样，这可能是可能的），我建议使用此解决方案。
另外，你的回答没有任何意义
@janw，阅读原文，发现问题不在于图像居中，而在于阻止其周围区域可点击。

【解决方案4】：

为了避免额外的 div 容器甚至 JavaScript，您可以将锚点显示为块：

.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}

/* height and width must equal your image's values */

<a href="#" class="logo"><img src="logo.png" alt="Logo" /></a>

现场演示：http://jsfiddle.net/performancecode/Ggk8v/

【讨论】：

【解决方案5】：

它仍然包含一个 div，但我这样做的方式是：

<div class="megaman">
<a href="img/megaman.jpg"><img src="img/megaman.jpg" alt="megaman"></a>
</div>



img {
height: 125px;
width: 200px;
}

.megaman{
text-align: center;
margin: 0 auto;
display: block;
}

是的，我用 .megaman 替换了 .logo，因为 megaman 很厉害！但它应该工作。如果不使用 div，我无法弄清楚。

【讨论】：