zdjęcia Align Jcrop

Question

mam ten kod:

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

Dzięki tej CSS:

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

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

Źródłem obrazu dla img2crop jest ładowany dynamicznie i obsługiwane za pomocą interfejsu API Jcrop. Ale Jcrop wyrównuje obraz po lewej stronie.

Jak mogę wyrównać obraz w środku elementu div?

Answer 1

Zamiast modyfikować plik jcrop css (nie zalecane, jak na autora wtyczki) można dodać klasę do elementu jcrop uchwytu jako opcja podczas inicjalizacji Jcrop:

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

Dodaj opakowanie w tagu img w kodzie HTML, np.

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

Następnie dodaj styl css, np.

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

Przetestowano w Chrome 31.0.1650.63 m - daj mi znać, jeśli nie działa w innych przeglądarkach? (Z wyjątkiem < IE8) :-)

Answer 2

Wypróbuj margin: 0 auto;, pozycja: względna;, float: left;.

Answer 3

Set

.jcrop-holder 
{ 
    margin: 0 auto; 
} 

Answer 4

Jedyną rzeczą, która pracowała dla mnie:

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