Javascript 对齐Jcrop图像

我有以下代码：

<div class='mini'>
    <div id='wrap_jcrop' class='td_wrap'>
        <img id='img2crop' src=''>
    </div>
</div>

img2crop的映像源是动态加载的，并使用jcropapi进行处理。但是Jcrop将左边的图像对齐

---

如何将图像与div的中心对齐

尝试边距：0自动，位置：相对，浮动：左集

.jcrop-holder
{
    margin: 0 auto;
}

---

在初始化jcrop时，您可以向jcrop holder元素添加一个类作为选项，而不是修改jcrop css文件（根据插件作者的说法，不推荐）：

jQuery(function($) {
    $('#jcrop_target').Jcrop({
        addClass: 'jcrop-centered'
    });
});

在HTML中的

img

标记周围添加包装，例如

<div class="crop-image-wrapper">
    <img id="jcrop_target" src="...." alt="" />
</div>

---

在Chrome 31.0.1650.63 m中测试-如果在其他浏览器中不起作用，请告诉我？（除了唯一对我有用的东西是：

JS:

$("#img2crop").attr("src", resp).load(function(){
    $("#wrap_jcrop").width(this.width);
    $("#wrap_jcrop").height(this.height);
    $("#wrap_jcrop").css("position", "absolute");
    $("#wrap_jcrop").css("top", ($("#wrap_jcrop").parent().height() - $(this).height())/2 + "px");
    $("#wrap_jcrop").css("left", ($("#wrap_jcrop").parent().width() - $(this).width())/2 + "px");
    $('#img2crop').Jcrop();
});

.mini {
    position: relative;
}

CSS:

$("#img2crop").attr("src", resp).load(function(){
    $("#wrap_jcrop").width(this.width);
    $("#wrap_jcrop").height(this.height);
    $("#wrap_jcrop").css("position", "absolute");
    $("#wrap_jcrop").css("top", ($("#wrap_jcrop").parent().height() - $(this).height())/2 + "px");
    $("#wrap_jcrop").css("left", ($("#wrap_jcrop").parent().width() - $(this).width())/2 + "px");
    $('#img2crop').Jcrop();
});

.mini {
    position: relative;
}

---

明亮的优雅的解决方案，谢谢克里斯，你是冠军：）