Elemento di centraggio all'interno di un elemento (jQuery)

Question

<div class="preview"> 
    <span class="center">This will be centered</div> 
</div> 

L'anteprima ha una larghezza fissa (120x120), ma lo span può contenere qualsiasi cosa (immagine, testo). Come faccio a centrarlo in verticale e in orizzontale utilizzando jQuery? Ho cercato alcuni frammenti ma tutti gli elementi centrali all'interno del 'corpo' non erano un altro elemento. Mi piacerebbe evitare di usare un "plugin" per questo se possibile.

Grazie mille!

Answer 1

Dal momento che non ti dispiace utilizzando jQuery, è possibile utilizzare il Center Element Plugin

E 'semplice come fare :

$(".preview").center(); 

Answer 2

Poiché hai menzionato che stai utilizzando jquery, presumo che ti piacerebbe farlo tramite javascript. Puoi aggiungere stili agli elementi nel DOM usando Jquery. È possibile utilizzare

http://docs.jquery.com/CSS/css#properties

$(.center).css({'display' : 'block', 'text-align' : 'center'}); 

A seconda dell'elemento, si può essere in grado di centrare senza dover utilizzare text-align: center se si imposta il margine di

margin: 0 auto 0 auto 

Questo imposterà il margine in alto e in basso a zero, e auto a sinistra ea destra, questo può essere usato per centrare l'elemento di blocco all'interno di un altro elemento di blocco.

Per centrare un elemento verticale in jQuery è possibile utilizzare questo

http://cool-javascripts.com/jquery/vertical-alignment-of-contents-inside-an-element-using-jquery.html

function ($) { 
    $.fn.vAlign = function(container) { 
     return this.each(function(i){ 
    if(container == null) { 
     container = 'div'; 
    } 
    var paddingPx = 10; //change this value as you need (It is the extra height for the parent element) 
    $(this).html("<" + container + ">" + $(this).html() + "</" + container + ">"); 
    var el = $(this).children(container + ":first"); 
    var elh = $(el).height(); //new element height 
    var ph = $(this).height(); //parent height 
    if(elh > ph) { //if new element height is larger apply this to parent 
     $(this).height(elh + paddingPx); 
     ph = elh + paddingPx; 
    } 
    var nh = (ph - elh)/2; //new margin to apply 
    $(el).css('margin-top', nh); 
     }); 
    }; 
})(jQuery); 

Answer 3

È possibile utilizzare un CSS solo così luzione (ignorando IE)

<div class="preview" style="display:table-cell;vertical-align:middle;text-align:center;margin:0 auto"> <span class="center">This will be centered</div> </div> con display: block funziona anche, ma solo per l'allineamento orizzontale, per l'allineamento verticale sia dovrai emulare un tavolo secondo il codice di cui sopra o in alternativa utilizzare JavaScript.

Answer 4

L'ultima jQuery UI ha una componente di posizione:

$("#myDialog").position({ 
    my: "center", 
    at: "center", 
    of: window 
}); 

Doc: http://jqueryui.com/demos/position/
Get: http://jqueryui.com/download

Answer 5

Si potrebbe aggiungere la tua funzione per jQuery:

// Centers on div 
jQuery.fn.center = function (div) { 
this.css("position", "absolute"); 

var position = div.position(); 
this.css("top", Math.max(0, ((div.height() - this.outerHeight())/2) + position.top) + "px"); 

this.css("left", Math.max(0, ((div.width() - this.outerWidth())/2) + position.left) + "px"); 
return this; 
}; 

Uso:

$('#ajxload').center($('#mapWrapper')).show(); 

Ha preso il concetto dal codice a Using jQuery to center a DIV on the screen

Answer 6

Si potrebbe fare usando i CSS.
Questo post fornisce una buona soluzione - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/
Fondamentalmente:
1. Impostare il bambino sulla posizione assoluta.
2.Imposta il genitore sulla posizione relativa.
3. Imposta il lato sinistro del bambino e superiore al 50%.
4. translate (-50%, - 50%) per spostare a sinistra e in alto della metà della larghezza dell'elemento figlio.