Ver Mensaje Individual
  #8 (permalink)  
Antiguo 03/10/2006, 18:42
Colacho
 
Fecha de Ingreso: septiembre-2006
Mensajes: 10
Antigüedad: 17 años, 7 meses
Puntos: 0
Centrar vertical y horizontalmente

Hola, espero que el código que expongo a continuación os solucione el problema. Con este código pueden centrar en la ventana del navegador, imágenes, tablas y todo de lo que tengais ocurrencia.

Primero, identificamos el ancho y el alto de la ventana del navegador y la restamos del ancho de la tabla o del div o de lo que tengais para centrar, esto para hallar el centro del objeto horizontalmente.
Para calcular el centro del objeto verticalmente, pues se utiliza el alto (height).
Pero sin más palabras, el código lo colocamos en una etiqueta SCRIPT en la sección HEAD, así:

<CODE>
function CenterHV(){
TabCentral.style.setExpression('left','document.bo dy.clientWidth/2 - TabCentral.offsetWidth/2');
TabCentral.style.setExpression('top','document.bod y.clientHeight/2 - TabCentral.offsetHeight/2');
document.recalc(true);
}
</CODE>

de aquí, TabCentral es el nombre o el ID que le colocamos a la tabla en el cuerpo del documento HTML (o sea en la sección BODY) para identificarla. CenterHV es el nombre de la función con el cual vamos a centrar utilizando la carga de la página:

<CODE>
<BODY onLoad='CenterHV();'>
</CODE>

y en el cuerpo del documento (sección BODY), colocamos, la tabla, por ejemplo:

<CODE>
<TABLE ID='TabCentral' STYLE='position:absolute;top:0;left:0;' BORDER=4 CELLPADDING=4 CELLSPACING=4 BORDERCOLORDARK='BLACK' BORDERCOLORLIGHT='GRAY'>
<TR BGCOLOR='#6699CC' ALIGN='center'>
<TD STYLE='width:80;'><B STYLE='color:#FFFFFF;'>VERSIÓN</B></TD>
<TD STYLE='width:80;'><B STYLE='color:#FFFFFF;'>FECHA</B></TD>
<TD STYLE='width:400;'><B STYLE='color:#FFFFFF;'>DESCRIPCIÓN DE CAMBIOS</B></TD>
<TD><B STYLE='color:#FFFFFF;'>ELABORÓ</B></TD>
<TD><B STYLE='color:#FFFFFF;'>REVISÓ</B></TD>
</TR>
<TR BGCOLOR='#FAFFF4' ALIGN='center'>
<TD>-
</TD>
<TD>-
</TD>
<TD>-
</TD>
<TD>-
</TD>
<TD>-
</TD>
</TR>
</TABLE>
</CODE>

Un detalle importante para anotaros es que la posición del objeto debe ser como se especifica en el STYLE del objeto, o sea, position:absolute y top:0, left:0. Aunque podeis hacer algunos cambios y reutilizar la función para obtener otros resultados. Pero lo que quereis creo que es lo que corresponde a lo que expuse. Espero haberle sido de ayuda, y haber sido lo suficientemente explícito para solucionar el problema.