将带有链接的图像居中

Posted 2023-03-06

【中文标题】将带有链接的图像居中

【英文标题】：center an image with a link on it

【发布时间】：2012-05-10 21:48:27

【问题描述】：

是否可以仅通过将类设置为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 中的代码无关。

【参考方案1】：

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

【讨论】：

这对我不起作用。目前，我可以使用 fancybox 类的样式，但我不知道会对其他链接产生哪些副作用。

尝试添加到a style float:left

如果我使用您的代码，图像居中，但图像周围仍有可点击区域。

啊，你不想这样……等一下

是的，我知道......我想如果不更改一些 Wordpress 代码，我就无法解决问题。但是我想知道一个主题开发者是如何正常处理这种情况的。

【参考方案2】：

在 aligncenter 类中添加 text-align:center

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

【讨论】：

这并没有改变什么。

【参考方案3】：

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

【讨论】：

您想通过使用 javascript 来回答这个问题，但可以仅使用 css 来完成。还有一个<a> 标签，用于您所知道的链接。

该链接仅用于使用fancybox（用于缩略图的完整版本）。不知道在这种情况下您的代码会是什么样子。接下来是我如何附加 onclick 事件？又是 JS 吗？

@janw，可能，但由于原始问题发布者无法用 html+css 解决（同样，这可能是可能的），我建议使用此解决方案。

另外，你的回答没有任何意义

@janw，阅读原文，发现问题不在于图像居中，而在于阻止其周围区域可点击。

【参考方案4】：

为了避免额外的 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/

【参考方案5】：

它仍然包含一个 div，但我这样做的方式是：

<div class="megaman">
<a href="img/megaman.jpg"><img src="img/megaman.jpg" ></a>
</div>



img 
height: 125px;
width: 200px;


.megaman
text-align: center;
margin: 0 auto;
display: block;

是的，我用 .megaman 替换了 .logo，因为 megaman 很厉害！但它应该工作。如果不使用 div，我无法弄清楚。