画像にリンクが設定されています

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を使用せずに画像を中央に配置するにはどうすればよいですか？私は全領域をクリック可能にしたくありません。

背景： this topicを読むことができます。それはWordpressとビルドされたエディタに関するものです。彼は画像上に自動的にクラスaligncenterを生成する（ユーザが中央ボタンを押した場合）。私は自分のテーマのためにこれが必要です。司会者によると、これはCSSに関する質問だけで、Wordpressのコードを変更する必要はありません。

Answer 1

第二の答え：あなたはスタイルシートへ<p>のスタイルを移動してくださいすることができた場合
はサイドダウン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; 
} 

でこれを貼り付け、これはまた、既に挿入画像...
に影響を与えません。 。 aligncenterクラスの

Answer 2

テキスト整列を追加すること：中央

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

Answer 3

私はワードプレスに慣れていないんだけど、あなたはインラインブロック」に画像のとアンカーの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'、カーソル。

Answer 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/

Answer 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; 
} 

そして、はい、私はロックマン岩ため.megamanで.logo置き換え！しかし、それは動作するはずです。私はdivを使わなければそれを理解できませんでした。