对齐Jcrop图像

Question

I've this code:

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

的图像源是通过Jcrop API动态加载和处理的。但是Jcrop将图像对齐到左侧。

如何将图像对齐到div的中心？

- Medical physicist

Answer 1

与其修改jcrop的css文件（根据插件作者的建议，不建议这样做），您可以在初始化Jcrop时将类添加到jcrop-holder元素作为选项：

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

在你的HTML中，为img标签添加一个包装器，例如：

```html

```

<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中测试 - 如果其他浏览器无法使用，请告诉我（除< IE8）:-)

- Chris

---

太棒了！优雅的解决方案，谢谢Chris，你是冠军 :) - Khiet

Answer 2

设置

.jcrop-holder
{
    margin: 0 auto;
}

- vpascoal

Answer 3

唯一有效的方法是：

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

- Medical physicist

Answer 4

尝试使用 margin: 0 auto;、position: relative;、float: left;。

- Nikk