центр изображения со ссылкой на него

Можно ли центрировать изображение только корыто, устанавливая класс в тег 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>

ссылка занимает всю ширину главных дел. Это означает, что изображение не только доступно для клика - также пространство вокруг изображения (на самом деле вся ширина) доступно для кликов. Это через CSS display: block. enter image description here

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

Фон: Вы можете прочитать this topic. Речь идет о Wordpress и встроенном редакторе. Он автоматически генерирует класс aligncenter на изображении (если пользователь нажал центральную кнопку). Мне нужно это для моей темы. По словам модераторов, это должно быть только вопросом CSS и не связано с изменением кода в Wordpress.

источник

2012-05-01 testing

-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> в таблице стилей ,

источник

2012-05-01 11:07:27 janw

Это не сработало для меня. В настоящее время я могу использовать стиль для класса 'fancybox', но я не знаю, какие побочные эффекты для других ссылок будут иметь. – testing

попробуйте добавить в стиль '' style '' float: left' – janw

Если я использую ваш код, то изображение будет центрировано, но у меня все еще есть области вокруг изображения. – testing

в AlignCenter классе добавить выравнивания текста: центр

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

источник

2012-05-01 11:10:55 Enve

Это ничего не меняло. – testing

Я не знаком с WordPress, но вы можете попробовать установить образ-х и свойство якорей игровая CSS «дисплей» на «встроенный блок ».

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

источник

2012-05-01 11:31:25 EyalAr

Это можно сделать с CSS, не нужно использовать javascript для него – janw

Что вы имеете в виду? – EyalAr

Вы хотите ответить на этот вопрос, используя javascript, но это можно сделать только с помощью css. И тег '', предназначенный для ссылок, как вы знаете. – janw

Чтобы избежать дополнительного 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>

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

источник

2013-08-23 17:32:38

все еще включает в себя 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, потому что Megaman скалы! Но это должно сработать. Я не мог понять это, не используя div.

источник

2014-11-11 17:35:08 Thinnling

центр изображения со ссылкой на него

ответ

Смежные вопросы