12

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でコードを変更する必要はありません。

4

5 に答える 5

7

aligncenterクラスにtext-align：centerを追加します

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}
于 2012-05-01T11:10:55.910 に答える
1

私はワードプレスに精通していませんが、画像とアンカーの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'。これにより、マウスのカーソルが「手」カーソルに変わります。

于 2012-05-01T11:31:25.650 に答える
1

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/

于 2013-08-23T17:32:38.790 に答える
1

それはまだ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を使わずにそれを理解することができませんでした。

于 2014-11-11T17:35:08.027 に答える
-3

2番目の答え：
これを貼り付けます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-01T11:07:27.340 に答える