在带有链接的图片中居中对齐图片

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代码无关。

- testing

Answer 1

在aligncenter类中添加text-align:center

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

- Enve

---

那没有改变什么。 - testing

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'，它会将鼠标光标更改为“手形”光标。

- EyalAr

---

你想用JavaScript回答这个问题，但只需使用CSS即可完成。还有一个<a>标签，通常用于链接。 - janw

@janw，可能吧，但由于原问题发布者无法通过html+css解决它（再次强调，这可能是可能的），我建议使用这种解决方案。 - EyalAr

@janw，请阅读原帖并了解问题不在于居中图像，而在于防止其周围的区域可点击。 - EyalAr

@testing，抱歉 - 我没有看到你想使用“fancybox”，我以为你想要重定向。 - EyalAr

@E.Ar：别费心了！我认为不同解决方案的想法是受欢迎的。 - testing

Answer 3

为了避免使用额外的

容器或者JavaScript，你可以使锚点显示为块级元素：

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

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

``

演示链接：http://jsfiddle.net/performancecode/Ggk8v/

- user2711845

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的情况下无法弄清楚。

- SpyrosKo

Answer 5

我找到的解决方案是，在锚点标签中添加/></a>以及宽度和高度，可以缩短图像的超链接...

<a class="link" href="URL" target="_blank"> <img width="75px" height="75px" alt="Facebook" src="IMAGE LOCATION"/></a>

- Anthony Wolter

Answer 6

第二个答案：
将以下内容粘贴到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> 的样式移至样式表中。

- janw

---

那对我没用。目前，我可以使用类fancybox的样式，但我不知道这会对其他链接产生什么副作用。 - testing

如果我使用你的代码，图像会居中，但是我仍然有图像周围的可点击区域。 - testing

是的，我知道……我认为如果不改变一些WordPress代码，我无法解决这个问题。但是我想知道主题开发人员通常如何处理这种情况。 - testing

看看我的新答案，只需将其粘贴到 functions.php 中。 - janw

检查 do_action 被调用的位置。 - janw