Centrar contenido con jQuery
En este artículo vamos a aprender como centrar un contenedor o div dentro de otro con jQuery.
En nuestro <body> deberemos tener 2 contenedores, uno dentro de otro:
<div id="page"> <div id="content">Contenedor centrado</div> </div>
Necesitaremos incorporar sus estilos respectivos en el <head> de la página:
#page {
margin:0px auto;
width:800px;
height:400px;
border:1px solid #000000;
}
#content {
background-color:#CCCCCC;
width:200px;
height:100px;
float:left;
position: relative;
padding:5px;
text-align:center;
}
Y también en el <head> deberemos añadir la librería jQuery y el script que realiza la función de centrar el contenedor con id=»content» dentro del contenedor con id=»page».
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content').css({'left':($('#page').width()/2)-($('#content').width()/2),'top':($('#page').height()/2)-($('#content').height()/2)});
});
</script>
Utilizamos la función css() de jQuery para modificar la posición del elemento. En el atributo ‘left’ añadimos el cálculo de la diferencia de la mitad del ancho de los contenedores y en el atributo ‘top’ añadimos el cálculo de la diferencia de la mitad del alto de los contenedores.
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
Una respuesta a “Centrar contenido con jQuery”
Deja una respuesta
73 artículos que te podrían interesar
Ver más sobre
Hola gracias por tu aporte, lo que yo busco es poder centrar un div al hacer scroll de forma horizontal. Me explico: quiero hacer una pagina responsive cuya navegacion es de forma horizontal, y cada seccion es un div con su respectivo contenido y todos estan alineados horizontalmente, lo que quiero es que cuando avances a x medida del div, se pase a la siguiente seccion y quede centrado conforme al ancho del viewport. Es una navegacion similar a la app de facebook o whatsaap de forma horizontal