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?
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:
Add a wrapper around the
img
tag in your HTML, e.g.Then add a css style, e.g.
Tested in Chrome 31.0.1650.63 m - let me know if it doesn't work in other browsers? (except < IE8) :-)