对齐 Jcrop 图像答案

【问题标题】：Align Jcrop images对齐 Jcrop 图像
【发布时间】：2013-09-04 16:07:10
【问题描述】：

我有这个代码：

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

使用这个 CSS：

div.mini {
    width: 300px;
    height: 200px;
    display: table;
}

div.td_wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

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

如何在 div 的中心对齐图像？

【问题讨论】：

标签： javascript jquery html css jcrop

【解决方案1】：

试试 margin: 0 auto;, position: relative;, float: left;。

【讨论】：

【解决方案2】：

设置

.jcrop-holder
{
    margin: 0 auto;
}

【讨论】：

【解决方案3】：

您可以在初始化 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>

然后添加一个css样式，例如

.jcrop-centered
{
    display: inline-block;
}
.crop-image-wrapper
{
    text-align: center;
}

在 Chrome 31.0.1650.63 m 中测试 - 如果它在其他浏览器中不起作用，请告诉我？（除了

【讨论】：

太棒了！优雅的解决方案，谢谢克里斯，你是冠军 :)

【解决方案4】：

唯一对我有用的东西：

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();
});

CSS：

.mini {
    position: relative;
}

【讨论】：