Align Jcrop images

Question

I've this code:

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

With this CSS:

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

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

The image source for img2crop is loaded dynamically and handled with a Jcrop api. But Jcrop aligns the image on the left.

How can I align the image in the center of the div?

Classroom

Answer 1

Rather than modify the jcrop css file (not recommended, as per the plugin author) you can add a class to the jcrop-holder element as an option when you initialise Jcrop:

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

Add a wrapper around the img tag in your HTML, e.g.

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

Then add a css style, e.g.

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

Tested in Chrome 31.0.1650.63 m - let me know if it doesn't work in other browsers? (except < IE8) :-)

Griffin

Brilliant! Elegant solution, thanks Chris, you are the champ :) – Piet

Answer 2

Set

.jcrop-holder
{
    margin: 0 auto;
}

Golly

Answer 3

Try margin: 0 auto;, position: relative;, float: left;.

Mensa

Answer 4

The only thing that worked for me:

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

Classroom