Skip to content

Cómo alinear un DIV verticalmente con jQuery

27 septiembre 2010

El objetivo de esta entrada es conseguir que nuestro <div> se muestre centrado en la página, no sólo en el plano horizontal sino también en el plano vertical. Alinear un <div> o cualquier elemento HTML horizontalmente, no entraña ninguna dificultad, puede hacerse fácilmente con CSS o incluso podemos utilizar la propiedad “align=center“.

Alinearlo verticalmente, ya es otro tema. En esta ocasión vamos a ver cómo con un par de líneas en jQuery podemos conseguir este efecto. También podemos alinear el <div> verticalmente si utilizamos tablas HTML y la propiedad para alinear elementos que tienen, pero el objetivo es tener nuestro <div> alineado gracias a jQuery sin ningún tipo de tabla.

Sólo necesitamos conocer dos datos:

1- El alto de la ventana del navegador del cliente. (Los píxeles verticales que ocupa actualmente la ventana del cliente)
2- El alto del <div> que queremos alinear. (#vertical)

Los elementos que va a contener nuestra página web van a ser:

1- body
2- <div> Wrapper: Será el <div> encargado de contener al <div> que queremos alinear verticalmente. Es muy importante que este <div> tenga la propiedad position de css a relative.

3- <div> Vertical: Será el <div> que alinearemos verticalemente en nuestra página, en este caso vamos a suponer que tenemos un formulario dentro de ese <div>

Vamos a ver el código HTML y jQuery que necesitamos. Es muy muy sencillo:

<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script type="text/JavaScript">
	$(document).ready(function(){
		$("#wrapper").css("position", "relative");
		$("#wrapper").css("top", function(){
			var w_h = $(document).height() / 2;
			var b_h = $("#vertical").height() / 2;
			return w_h - b_h;
		});
	});
  </script>
 </head>
<body>
 <div id="wrapper">
   <div id="vertical">
     <form>
 	<label>User:</label><input type="text" /><br>
 	<label>Pass:</label><input type="text" />
     </form>
   </div>
 </div>
</body>

Como veis, el código jQuery es muy simple. Lo único que hacemos es obtener el alto de la ventana del navegador y el alto de <div id=vertical> para conocer cuantos píxeles debemos desplazar hacia abajo nuestro div. El código jQuery se encarga directamente de establecer el valor de la propiedad top de css al margen calculado.

Por eso es necesario que “#wrapper” tenga la propiedad position a relative, ya que así podremos (por herencia) conseguir que #vertical también la tenga y podremos desplazarlo a la posición que nos interese.

Cualquier mejora, sugerencia, duda…será siempre bien recibida 😉

Anuncios
6 comentarios leave one →
  1. harrypotter permalink
    7 octubre 2010 00:08

    …’vertical-align:middle’ does not work for you?

    • rekkeb permalink*
      7 octubre 2010 09:43

      The vertical-align property is for inline elements only, and in this post we are using block elements. That is the reason why vertical-align not work for me in this case. 😉

  2. karlos permalink
    17 diciembre 2010 04:35

    donde bajo el jquery.js

    • rekkeb permalink*
      17 diciembre 2010 12:53

      Su web oficial es: http://jquery.com 😉

  3. 2 enero 2011 20:55

    otra posibilidad

    jQuery.event.add(window, “load”, resizeFrame);
    jQuery.event.add(window, “resize”, resizeFrame);

    function resizeFrame()
    {
    $(“#wrapper”).css(“position”, “relative”);
    $(“#wrapper”).css(“top”, function(){
    var w_h = $(document).height() / 2;
    var b_h = $(“#vertical”).height() / 2;
    return w_h – b_h;
    });
    }

    • rekkeb permalink*
      3 enero 2011 00:45

      Genial esa asociación de eventos. Gracias david

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: