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

Add "text-align:center;" to your containing div. Also no need for the auto margins.

于 2012-11-29T02:30:23.320 回答
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 回答
0

If you want to do it in js, give this function a try after you load your 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 回答