0

以下のコードは、imgのマージンを調整するため、幅600pxのdivの中央に配置されます。一般的には機能しますが、機能しない場合もあり、2回目の呼び出しが必要になります。

編集：言及するのを忘れた：この関数は、画像のソースを別の画像に設定しているため、画像を変更している別のユーザーによってトリガーされます。

何か助けはありますか？

function adjustMargin(imageId) {
var image = document.getElementById(imageId);
image.setAttribute("style", "margin: 0 " + (300 - image.clientWidth / 2).toString() + "px");
}

あまりうまく機能していない例は、ここで見ることができます。

4

2 に答える 2

5

cssを使用します：

#imgId {
    margin: 0 auto;
    display: block;
    // you are subtracting 300px and dividing by 2 
    // so assume your image is 300px wide
    width: 300px; 
}

imgタグはインライン要素であり、imgcssに含める必要のあるブロックmargin: 0 auto要素でのみ機能します。display: block

インライン要素を中央に配置する代わりの方法は次のとおりです。

#imgId {
    text-align: center;
}

ここで両方の方法のデモ

于 2012-11-12T11:23:15.863 に答える
1

まず、スタイルを設定する正しい方法は次のとおりです。

image.style.margin = "margin: 0 " + (300 - image.clientWidth / 2).toString() + "px";

（まあ、違いはないかもしれませんが.style、JSで要素のスタイルを変更するためにproperyが使用されることになっています）

2番目-そのコードが実行されたときにイメージがすでにロードされていることを確認しますか？いいえの場合-image.clientWidthまだ利用できない可能性があります。onload画像が確実に読み込まれるときに、イベントを使用してそのコードを実行する必要がある場合があります。

3番目-ブルーノの回答で述べられているようにmargin:0 auto;、画像は自動的にdiv内の中央に配置されるため、JSはまったく必要ありません。

編集：

しかし、3番目のアプローチでは、画像がブロック要素ではないため、問題が発生します。それを機能させるには、次のようなことを行います。

<div style="
    width: 600px;
"><img src="Bilder/re-tabouret/lukas_baumgartner_re_tabouret_1@b.jpg" alt="mainArticleImg" class="projektMainImg" id="01:00" style=""></div>

画像を指定された幅のdivにラップし、次のようにcssを更新します。

img.projektMainImg {
margin: 0 auto;
max-width: 600px;
max-height: 400px;
display: block;
}

（display:block追加を参照）または、指定された幅のdivで画像をラップし、text-align:centerそのスタイルに追加します（表示ブロックと余白は必要ありません）。

<div style="
    width: 600px;
    text-align: center;
"><img src="Bilder/re-tabouret/lukas_baumgartner_re_tabouret_1@b.jpg" alt="mainArticleImg" class="projektMainImg" id="01:00" style=""></div>

画像を左600ピクセルの領域の中央に配置するには、ラッパーdivが必要です。それ以外の場合は、<div class="projektImages">

于 2012-11-12T11:27:17.230 に答える