0
Gracias

Unas palabras de agradecimiento nunca están de más.

Javascript – Centrar verticalmente una página Web



Tratar de centrar verticalmente una página Web con CSS es una perdida de tiempo. La solución más práctica consiste en utilizar JavaScript.



1. El archivo .js


Copia este script y pégalo en un archivo llamado por ejemplo: centrar.js

function align()
{

	var lmt = document.getElementById('centrado');
	var container = document.documentElement;

	if(lmt && container)
	{
	    var containerHeight;
	    if (container.innerWidth)
	    {
            containerHeight = container.innerHeight;
		}
		else
		{
            containerHeight = container.clientHeight;
		}
	    var lmtHeight;
	    if (lmt.innerWidth)
	    {
            lmtHeight = lmt.innerHeight;
		}
		else
		{
            lmtHeight = lmt.offsetHeight;
		}
		var y = Math.ceil((containerHeight - lmtHeight) / 2);
		if(y < 0)
		{
			y = 0;
		}
		lmt.style.position = "relativa";
		lmt.style.top = y + "px";
	}
	if (document.getElementById)
	{
		document.body.style.visibility = 'visible';
	}

}

function addevent(obj,evt,fn,capt){
	if(obj.addEventListener)
	{
		obj.addEventListener(evt, fn, capt);
		return true;
	}
	else if(obj.attachEvent)
	{
		obj.attachEvent('on'+evt, fn);
		return true;
	}
	else return false;
}

if (document.getElementById && document.getElementsByTagName)
{
	addevent(window, 'load', align, false);
	addevent(window, 'resize', align, false);
}

2. La página .html


Para que la página este centrada, es necesario llamar al archivo .js.
La página será mostrada así:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml" xml:lang=
"es">
	<head>
		<!-- [...] -->
		<script type="texto/javascript" src="centrar.js">
</script>
	</head>
	<body>
		<div id="centrado">

		<!—Ponga el código de su página aquí. Este será
 centrado -->
		
		</div>
	</body>
</html>

3. Uso


La función align() de JavaScript definida en el archivo .js recuperará el contenido que debe ser centrado. En este ejemplo, el elemento que lleva el identificador [id="centrado"] es el que será centrado.

var lmt = document.getElementById('centrado');


De este modo, en el ejemplo de la página .html, el contenido situado en el elemento <div id="centrado"></div> es el que será centrado.

4. Inconveniente


Esto sólo funcionará si el usuario tiene Javascript activado en su navegador.

5. A tener en cuenta


Como todo en Javascript esto no es más que una forma de embellecer la página. Siempre deberían existir soluciones alternativas en el caso de que el usuario no tenga activado el soporte de este lenguaje.

En el presente caso, esto no es posible. Pero su uso no impide para nada la navegación si el soporte está desactivado.
0
Gracias

Unas palabras de agradecimiento nunca están de más.

Haz una pregunta
Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net y director digital en el Grupo Figaro. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.

2 Comentarios