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

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

score 7 · Accepted Answer

在 aligncenter 类中添加 text-align:center

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score -3 · Accepted Answer

Second answer:
paste this in 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;
}

Down side, this won't effect already inserted images...
Also if you can please move the style of the <p> to the stylesheet.

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

5 回答 5

Related

Reference