Jcrop Image Alignment

Question

I have this code:

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

Using 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 processed using the Jcrop api. But Jcrop aligns the image to the left.

How to align the image in the center of the div?

Answer 1

Instead of modifying the jcrop css file (not recommended, according to the author of the plugin), you can add the class to the jcrop-holder element as an option when you initialize 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 css style like

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

Tested in Chrome 31.0.1650.63 m - tell me if it does not work in other browsers? (except <IE8) :-)

Answer 2

Set

 .jcrop-holder { margin: 0 auto; } 

Answer 3

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

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