Elemento de centrado dentro de un elemento (jQuery)

Question

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

La vista previa tiene ancho fijo (120x120), pero el span puede contener cualquier cosa (imagen, texto). ¿Cómo lo centro verticalmente y horizontalmente usando jQuery? Busqué algunos fragmentos, pero todos centran los elementos dentro del "cuerpo", no en otro elemento. Me gustaría evitar el uso de un 'complemento' para esto si es posible.

¡Muchas gracias!

Answer 1

Ya que no les importa usar jQuery, se puede utilizar el Center Element Plugin

Es tan simple como hacer :

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

Answer 2

Como mencionaste que estás usando jquery, supongo que te gustaría hacerlo a través de javascript. Puede agregar estilos a los elementos en el DOM usando Jquery. Puede utilizar

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

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

Dependiendo del elemento, es posible que pueda para centrarla sin tener que utilizar el texto-align: center si se establece el margen de

margin: 0 auto 0 auto 

Este establecerá el margen en la parte superior e inferior en cero, y automático en la izquierda y la derecha, esto se puede utilizar para centrar el elemento de bloque dentro de otro elemento de bloque.

Para centrar un elemento vertical en jQuery puede utilizar esta

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

Puede usar un CSS solamente, entonces lution (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> usando display: block también funcionará pero solo para la alineación horizontal, para la alineación vertical, o tendrá que emular una tabla según el código anterior o bien usar JavaScript.

Answer 4

La última jQuery UI tiene un componente posición:

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

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

Answer 5

Se puede añadir su propia función de 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(); 

llevó el concepto a partir del código en Using jQuery to center a DIV on the screen

Answer 6

Usted podría hacer que el uso de CSS.
Esta publicación proporciona una buena solución - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/
Básicamente:
1. Coloque al niño en la posición absoluta.
2.Establezca el elemento primario en posición relativa.
3. Coloque el izquierdo y el superior del niño al 50%.
4. traduzca (-50%, - 50%) para desplazarse hacia la izquierda y hacia arriba por la mitad del ancho del elemento secundario.