Align Jcrop Bilder

Question

Ich habe diesen Code:

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

Mit dieser CSS:

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

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

Die Bildquelle für img2crop wird dynamisch geladen und mit einem Jcrop api behandelt. Aber Jcrop richtet das Bild auf der linken Seite aus.

Wie kann ich das Bild in der Mitte des div ausrichten?

Answer 1

Anstatt die jcrop CSS-Datei ändern (nicht empfohlen, da pro Plugin Autor) Sie eine Klasse zum jcrop Halterelement als Option hinzufügen können, wenn Sie Jcrop initialisieren:

Fügen Sie einen Wrapper rund um die img Tag in Ihrem HTML, z

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

Dann fügen Sie einen CSS-Stil, z.

Getestet in Chrome 31.0.1650.63 m - lassen Sie mich wissen, wenn es in anderen Browsern nicht funktioniert? (Außer < IE8) :-)

Answer 2

Versuchen margin: 0 auto;, Position: relativ;, Schwimmer: links;.

Answer 3

Set

.jcrop-holder 
{ 
    margin: 0 auto; 
} 

Answer 4

Das einzige, was für mich gearbeitet:

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