Css 将带有链接的图像居中放置

是否可以仅通过将类别设置为

img

标记来居中图像，而不会产生副作用？问题在于：我在图像周围有一个锚。如果我使用以下CSS

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

这个（精简的）HTML：

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

display:block

实现的。

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

背景： 你可以阅读。它是关于Wordpress和内置编辑器的。他会自动在图像上生成类

aligncenter

（如果用户按下中心按钮）。我需要这个作为我自己的主题。根据主持人的说法，这应该只是一个CSS问题，与更改Wordpress中的代码无关。

第二个答案：
将其粘贴到

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;
}

add_filter（'image_send_to_editor'，'give_linked_images_class'，10,8）；
函数提供链接图像类（$html、$id、$caption、$title、$align、$url、$size、$alt=''）{
//只在中间做这个
如果（$align=='center'）{
$html=str_replace（'aligncenter'，''$html）；
$html='
”。$html'
'；
}
返回$html；
}

向下，这不会影响已插入的图像…

---

另外，如果可以，请将

的样式移动到样式表中。

在aligncenter类中添加文本align:center

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

---

我不熟悉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>

var myRedirect=函数（）{
window.location.href='其他位置'；
}

---

请注意

style='cursor:pointer'

，它将鼠标光标更改为“手”光标。

为了避免额外的

div

容器甚至JavaScript，可以将锚点显示为块：

.logo{显示：块；高度：115px；边距：0自动；宽度：115px；}

/*高度和宽度必须等于图像的值*/

---

现场演示：

它仍然包含一个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;
}

img{
高度：125px；
宽度：200px；
}
梅格曼先生{
文本对齐：居中；
保证金：0自动；
显示：块；
}

---

是的，我用.megaman替换了.logo，因为megaman很摇滚！但它应该起作用。如果不使用div，我就无法计算出来。

这对我不起作用。目前，我可以为类

fancybox

使用样式，但我不知道会对其他链接产生哪些副作用。尝试在

中添加样式
浮动：左
如果我使用你的代码，图像居中，但图像周围仍有可单击区域。啊，你不想这样。。。就一会儿是的，我知道。。。我想如果不修改一些Wordpress代码，我就无法解决这个问题。但我想知道主题开发人员通常如何处理这种情况。这并没有改变什么。你想用javascript来回答这个问题，但只需要css就可以了。还有一个
标签，用于链接。该链接仅用于使用fancybox（用于缩略图的完整版本）。不知道您的代码在这种情况下会是什么样子。接下来是如何附加onclick事件？再次使用JS？@janw，可能吧，但由于原始的问题海报无法使用html+css解决它（同样，这可能是可能的），我建议使用此解决方案。此外，您的答案不在中心anything@janw，阅读原始帖子，发现问题不在于图像居中，但是防止它周围的区域被点击。
<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;
}