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

Question

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

L'aperçu a une largeur fixe (120x120), mais l'étendue peut contenir n'importe quoi (image, texte). Comment puis-je le centrer verticalement et horizontalement en utilisant jQuery? J'ai regardé des extraits mais tous les éléments centraux à l'intérieur du 'corps' ne sont pas un autre élément. Je voudrais éviter d'utiliser un "plugin" pour cela si possible.

Merci beaucoup!

Answer 1

Puisque vous ne me dérange pas en utilisant jQuery, vous pouvez utiliser le Center Element Plugin

Il est aussi simple que faire :

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

Answer 2

Puisque vous avez mentionné que vous utilisez jquery, je suppose que vous voulez le faire via javascript. Vous pouvez ajouter des styles aux éléments du DOM en utilisant 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 pourrez peut-être centrer sans avoir à utiliser du texte-align: center si vous définissez la marge sur

margin: 0 auto 0 auto 

Cette mettra la marge en haut et en bas à zéro, et automatique sur la gauche et la droite, cela 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 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); 

Answer 3

Vous pouvez utiliser un CSS uniquement L'utilisation de display: block fonctionnera également mais uniquement pour l'alignement horizontal, pour l'alignement vertical, vous devrez soit émuler une table selon le code ci-dessus, soit utiliser Javascript.

Answer 4

La dernière jQuery UI a une composante de position:

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

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

Answer 5

Vous pouvez ajouter votre propre fonction 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 à partir du code à Using jQuery to center a DIV on the screen

Answer 6

Vous pouvez le faire en utilisant le CSS.
Cet article fournit une bonne solution - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/
Fondamentalement:
1. Réglez l'enfant sur la position absolue.
2.Réglez le parent sur la position relative.
3. Réglez la gauche et le haut de l'enfant à 50%.
4. traduire (-50%, - 50%) pour décaler vers la gauche et vers le haut de la moitié de la largeur de l'élément enfant.