0

jqueryを使用して画像を動的に読み込んでいますが、画像をdiv内の中央に配置できないようです。私のHTMLは次のようになります。

<div style="width:100%;border: solid 1px #ff0000;">
    <img id="current_photo" src="" style="margin-right: auto; margin-left: auto;max-width:97%;"/>
</div>

jQuery呼び出しは次のようになります。

    $("#current_photo").attr('src', img_url);
    //$('#current_photo').css({'margin-right':'auto','margin-left':'auto'});

画像の読み込み後にCSSを適用する必要があると思いますが、これも機能しないようです。

私が何を試しても、画像は常に左揃えになります。何が起こっているのか考えてみませんか？

4

4 に答える 4

4

「text-align：center;」を追加します あなたの含むdivに。また、自動マージンは必要ありません。

于 2012-11-29T02:30:23.320 に答える
0

jsでそれを実行したい場合は、imgをロードした後にこの関数を試してみてください。

setToCenterOfParent($("#current_photo"), $("#current_photo").parent());

function setToCenterOfParent( obj, parentObj ) {
    var height = $( obj ).height();
    var width = $( obj ).width();
    if ( parentObj == window ) {
        $( obj ).css( 'top', ( $( parentObj ).height() / 2 ) - ( height / 2 ) );
        $( obj ).css( 'left', ( $( parentObj ).width() / 2 ) - ( width / 2 ) );
    }
    else {
        $( obj ).css( 'top', ( $( parentObj ).height() / 2 ) - ( height / 2 ) + $( parentObj ).position().top );
        $( obj ).css( 'left', ( $( parentObj ).width() / 2 ) - ( width / 2 ) + $( parentObj ).position().left );
    }
}
于 2012-11-29T02:31:30.243 に答える
0

このスタイルをあなたのimg：に追加することで、それを機能させることができます。

display: block;

デモ： http： //jsfiddle.net/Zsq8Q/3/

srcここでは動的に設定しているという事実は問題でimgはありません。要素はデフォルトではブロック要素ではないため、ブロックにしない限りマージン設定は機能しません。

于 2012-11-29T02:41:31.467 に答える
0

コンテナのtext-alignプロパティは問題を解決します：

<div style="text-align:center; width:100%;border: solid 1px #ff0000;">
    <img id="current_photo" src="" style="margin-right: auto; margin-left: auto;  max-width:97%;"/>
</div>

デモ：

http://jsfiddle.net/Zsq8Q/4/

于 2012-11-29T02:46:53.877 に答える