Центрировать изображение со ссылкой на него

Можно ли центрировать изображение только путем установки класса в тег 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. enter image description here

Как центрировать изображение без использования родительского div? Я не хочу, чтобы вся область была нажата.

Фон: Вы можете прочитать этот раздел. Речь идет о 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> в таблицу стилей.

Ответ 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', который изменяет курсор мыши на "ручной" указатель.

Ответ 4

Чтобы избежать использования дополнительного контейнера div или даже JavaScript, вы можете сделать привязку в виде блока:

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

/* height and width must equal your image values */

<a href="#" class="logo"><img src="logo.png" alt="Logo" /></a>

Live demo: http://jsfiddle.net/performancecode/Ggk8v/

Ответ 5

он по-прежнему включает 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;
}

И да, я заменил .logo на .megaman, потому что мегаманские камни! Но это должно сработать. Я не мог понять это без использования div.