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

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的情况下居中图像？我不希望整个区域可点击.

背景:您可以阅读此主题.它是关于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

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