Elément de centrage à l'intérieur d'un élément (jQuery)

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

Aperçu a une largeur fixe (120x120), mais la durée peut contenir n'importe quoi (image, texte). Comment puis-je centrer verticalement et horizontalement à l'aide de jQuery? J'ai regardé quelques extraits, mais ils ont tous le centre d'éléments à l'intérieur du "corps" pas un autre élément. Je voudrais éviter d'utiliser un "plugin" pour cette si possible.

Merci beaucoup!

source d'informationauteur 3zzy

  1. 4

    Puisque vous n'avez pas l'esprit à l'aide de jQuery, vous pouvez utiliser le Élément Central Du Plugin

    C'est aussi simple que de faire:

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

    La dernière jQuery UI a un composant de position:

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

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

    Obtenir: http://jqueryui.com/download

  3. 3

    Puisque vous avez mentionné que vous êtes à l'aide de jquery, je suppose que vous voulez faire cela via javascript. Vous pouvez ajouter des styles à des éléments dans le DOM à l'aide de Jquery. Vous pouvez utiliser

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

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

    En fonction de l'élément, vous pourriez être en mesure de le centrer sans avoir à utiliser text-align:center si vous définissez la marge de 

    margin: 0 auto 0 auto

    Ceci permettra de définir la marge en haut et en bas de zéro, et de l'auto sur la gauche et la droite, ce qui peut être utilisé pour centrer l'élément de bloc à l'intérieur d'un autre élément de bloc.

    Pour centrer un élément verticalement en jquery vous pouvez utiliser cette

    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);
  4. 2

    Vous pouvez utiliser une CSS, la seule solution (en ignorant 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>

    à l'aide de display:block fonctionne également, mais seulement pour l'alignement horizontal, vertical alignement, vous aurez besoin d'émuler un tableau comme par le code ci-dessus ou, alternativement, utiliser de JavaScript.

  5. 0

    Vous pouvez ajouter votre propre fonction pour 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;
};

    Utilisation:

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

    A pris le concept de code à Utilisation de jQuery pour centrer une DIV sur l'écran

  6. 0

    Vous pourriez le faire à l'aide de CSS.
    Ce poste offre une bonne solution - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/

    En gros:

    1. La valeur de l'enfant à la position absolue.
    2. Définir le parent position relative de l'.
    3. Jeu de enfant en haut et à gauche à 50%.
    4. traduire(-50%,-50%), de déplacer en haut et à gauche de la moitié de la largeur de l'élément enfant.