以图像为中心，上面有链接

Question

是否可以通过将类设置为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中更改代码。

Answer 1

在aligncenter类中添加text-align：center

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

Answer 2

我不熟悉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'，它将鼠标的光标更改为“手”光标。

Answer 3

要避免使用额外的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/

Answer 4

它仍然包含一个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，我无法理解。

Answer 5

第二个答案：
将其粘贴到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>的样式移动到样式表。