css - 将带有链接的图像居中

Question

是否可以通过为 img 标签设置一个类来使图像居中而没有副作用？问题如下:我在图像周围有一个 anchor 。如果我使用以下 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;
}