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

Question

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

di larghezza

Anteprima è fisso (120x120), ma la calibrazione possono contenere qualsiasi cosa (immagine, testo). Come faccio a centrarlo in verticale e in senso orizzontale con jQuery ? Ho guardato alcuni frammenti, ma tutti gli elementi centrali all'interno del 'corpo' non un altro elemento. Mi piacerebbe evitare l'uso di un 'plug-in' per questo se possibile.

Molte grazie!

Answer 1

Dal momento che non ti dispiace utilizzando jQuery, è possibile utilizzare il Centro elemento Plugin

E 'semplice come fare:

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

Answer 2

L'ultima jQuery UI ha una componente di posizione:

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

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

Answer 3

Dal momento che lei ha citato si sta utilizzando jQuery, presumo che vorrebbe fare questo tramite JavaScript. È possibile aggiungere stili per elementi del DOM utilizzando 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 per

margin: 0 auto 0 auto

Questo imposterà il margine sulla parte superiore e inferiore 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 4

È possibile utilizzare un CSS unica soluzione (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:. blocco funziona anche, ma solo per l'allineamento orizzontale, per l'allineamento verticale sia dovrai emulare un tavolo secondo il codice di cui sopra, oppure utilizzare JavaScript

Answer 5

Si potrebbe aggiungere la tua funzione 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;
};

Usa:

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

Ha preso il concetto dal codice a utilizzando jQuery per il centro un DIV sullo schermo

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/
In sostanza:
1. Impostare il bambino a posizione assoluta. Pagina 2. Impostare il genitore di posizione relativa. Pagina 3. Set del bambino a sinistra e dall'alto verso il 50%. Pagina 4. translate (-50%, - 50%). di spostamento a sinistra e in alto per metà della larghezza dell'elemento figlio