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.