对齐Jcrop图像

Question

我有这个代码:

<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的中心？

Answer 1

而不是修改jcrop css文件(不推荐,根据插件作者),您可以在初始化Jcrop时将类添加到jcrop-holder元素作为选项:

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

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米 - 如果它在其他浏览器中无效,请告诉我？(<IE8除外):-)