immagini Allinea Jcrop

Question

ho questo codice:

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

Con questo CSS:

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

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

La fonte immagine per img2crop viene caricata in modo dinamico e gestita con un api Jcrop. Ma Jcrop allinea l'immagine a sinistra.

Come posso allineare l'immagine al centro del div?

Answer 1

Invece di modificare il file jcrop css (non raccomandato, come per l'autore plugin) è possibile aggiungere una classe all'elemento jcrop titolare come opzione quando si inizializza Jcrop:

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

Aggiungere un wrapper attorno al tag img nel codice HTML, ad es.

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

Quindi aggiungere uno stile css, ad es.

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

testato in Chrome 31.0.1650.63 m - fammi sapere se non funziona in altri browser? (Tranne < IE8) :-)

Answer 2

Prova margin: 0 auto;, posizione: relativa;, galleggiante: sinistra;.

Answer 3

Set

.jcrop-holder 
{ 
    margin: 0 auto; 
} 

Answer 4

L'unica cosa che ha funzionato per 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; 
}