Zentrierelement in einem Element (jQuery)

Question

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

Vorschau hat Breite (120x120) festgelegt, sondern Spanne kann etwas (Bild, Text) enthalten. Wie zentriere ich es vertikal und horizontal mit jQuery ? Ich sah ein paar Schnipsel, aber sie alle Mitte Elemente innerhalb des ‚Körper‘ nicht ein weiteres Element. Ich möchte mich für diese Verwendung ein ‚Plugin‘ vermeiden, wenn möglich.

Vielen Dank!

Answer 1

Da es Ihnen nichts ausmacht jQuery verwenden, können Sie die -Center Element Plugin

Es ist so einfach wie zu tun:

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

Answer 2

Die neueste jQuery UI hat eine Position Komponente:

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

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

Answer 3

Da Sie erwähnt Sie verwenden jquery, ich nehme an, Sie möchten diese über Javascript tun. Sie können Stile auf Elemente im DOM mit JQuery hinzufügen. Sie verwenden können,

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

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

Je nach Element können Sie in der Lage sein, es zu zentrieren, ohne Verwendung text-align mit: Center, wenn Sie den Rand auf

gesetzt

margin: 0 auto 0 auto

Dies wird den Marge auf der Ober- und Unterseite auf Null und Auto auf der linken Seite gesetzt und rechts, kann dies verwendet werden, um das Blockelement innerhalb eines anderen Blockelementes zu zentrieren.

Um ein Element zu zentrieren vertikal in jquery können Sie verwenden diese

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

Sie können eine CSS einzige Lösung (ohne Berücksichtigung 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> mit Anzeige. Block wird auch funktionieren, aber nur für die horizontale Ausrichtung, für die vertikale Ausrichtung entweder Sie eine Tabelle nach dem obigen Code oder alternativ verwenden JavaScript emulieren müssen

Answer 5

Sie können Ihre eigene Funktion jquery hinzufügen:

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

Verwendung:

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

Nahm das Konzept aus dem Code unter Mit jQuery zum Zentrum ein DIV auf dem Bildschirm

Answer 6

Sie könnte es tun mit CSS
Dieser Beitrag stellt eine gute Lösung -. http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/
Grundsätzlich gilt:
1. Stellen Sie das Kind absolut auf die Position.
2. Stellen Sie die übergeordnete Position relativ.
3. Set Kind ist auf 50% links und oben.
4. übersetzen (-50%, - 50%) verschieben, links und oben um die halbe Breite des Kindes Element

.