centrar tabla segun resolucion

bbarranco · #1 (**permalink**) 02/12/2004, 05:07

Buenas, tengo una pagina en la que el todo el contenido se encuentra dentro de una tabla. Para mas info, la web hace scroll ya que en la tabla hay bastantes elementos, pero eso no me preocupa. Lo que deseo es centrar esta tabla (ya que no ocupa la anchura de pagina) segun la resolucion del equipo que este visualizando. Me gustaria hacerlo con CSS, ya que para la tabla tengo definida una clase, y solo tendria que modificarla.
Si alguien tiene idea sobre el tema, os agredeceria enormemente que me echaseis un cable¡¡

Un saludo y gracias por adelantado¡

tunait · #2 (**permalink**) 02/12/2004, 05:54

Hola bbarranco

traslado el tema al foro de CSS

movido desde (x)html

saludos

JavierB · #3 (**permalink**) 02/12/2004, 07:21

Hola bbarranco

Prueba con esto:

<table style="width:400px;margin-left:auto;margin-right:auto">

Saludos,

bbarranco · #4 (**permalink**) 02/12/2004, 08:26

Hola buenas, gracias por la ayuda, pero sigue sin funcionarme. Tengo la clase Table definida como:
table {
width:700px;
margin-left:auto;
margin-right:auto;

}
Pero no me centra las tablas que tienen esa hoja de estilos adjunta. Me ha hecho un amago con el index, pero despues de borrar archivos temporales he actualizado, y otra vez pegado a la derecha...
Un poco raro no?
Bueno si sabes algo, aqui estamos, gracias¡¡

JavierB · #5 (**permalink**) 02/12/2004, 10:38

Hola de nuevo.

En IE no te funcionará si no le pones un DTD adecuado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

También puedes meter la tabla dentro de una capa:

<div style="text-align:center">

Por cierto, creo que margin:auto falla en IE con XHTML estricto. Alguien sabe algo de esto y como solucionarlo

Bueno... Espero que esta vez te funcione. Saludos,

KnowDemon · #6 (**permalink**) 02/12/2004, 14:20

Hola JavierB,

Ignoro si margin: auto; funcione con XHTML estricto en IE, pero seguro funciona margin-left: auto; margin-right: auto; si lo que deseas es centrar algún elemento en bloque...

JavierB · #7 (**permalink**) 03/12/2004, 10:33

Hola KnowDemon

Tuve un despiste en mi anterior mensaje. Me refería precisamente a margin-left y margin-right. Por ejemplo, este código:

<div style="width:400px;height:200px;margin-left:auto;margin-right:auto;border:1px solid green">

En IE deja la capa centrata con un DTD transicional, pero no con estricto. Lo he probado con la versión 6.

Saludos,

Muzztein · #8 (**permalink**) 03/12/2004, 13:23

Cita:

Iniciado por KnowDemon

Hola JavierB,

Ignoro si margin: auto; funcione con XHTML estricto en IE, pero seguro funciona margin-left: auto; margin-right: auto; si lo que deseas es centrar algún elemento en bloque...

y por que no va a funcionar si el css no tiene nada que ver con xhtml ?

frijolerou · #9 (**permalink**) 03/12/2004, 19:36

Con xhtml estricto en IE6 a mi me funciona perfectamente el centrado usando margin:auto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Aqui va el titulo</title>
</head>
<body>
<table border="1" style="margin:auto;">
<tr><td>texto</td></tr>
</table>
</body>
</html>

El problema lo da IE 5.0, pero se soluciona definiendo text-align:center en el body

JavierB · #10 (**permalink**) 04/12/2004, 03:54

Hola.

El código de frijolerou me ha funcionado perfectamente. El problema era que no estaba poniendo bien el DTD.

Cita:

Iniciado por Muzztein

y por que no va a funcionar si el css no tiene nada que ver con xhtml ?

Pues puede que no tenga nada que ver una cosa con otra

pero lo cierto es que si no pones ningún DTD en IE no funciona

Gracias a todos. Saludos,

caricatos · #11 (**permalink**) 04/12/2004, 04:48

Hola a todos:

Sobre el tema de poner margin: auto; o margin-left: auto; margin-right: auto;
Se trata de lo mismo, aunque con el primero de los casos también equivale a declarar margin-top: auto; margin-bottom: auto;

Esto se debe a que cuando nos referimos a estos estilos para bloques, la forma simple(margin, padding, border) equivale a la declaración para los cuatro lados... También se pueden poner 4 valores: margin: 1cm auto 20px auto; correspondiéndose a los 4 lados empezando por el superior y siguiendo el sentido de las agujas del reloj... o sea que equivaldría a:
margin-top: 1cm; margin-rigth: auto; margin-bottom: 20px; margin-left: auto;
Hay otras 2 formas de declarar este tipo de estilos, y se trata de poner solo 2 valores, cuando se pretende que sea igual la definición para cada pareja de laterales top/bottom left/right...

Y el último caso no lo tengo muy claro, ya que si se ponen 3 de los valores, no sé muy bien a como se interpreta... Si alguien lo sabe, me gustaría que lo indicase. (voy a buscar la respuesta, y luego lo comento)

Saludos

JavierB · #12 (**permalink**) 04/12/2004, 08:18

Hola caricatos.

"Si hay tres valores el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior es definido por el tercero"

"Copypasteado" de: http://www.sidar.org/recur/desdi/mcs...caja.php#c_mar

En esta página se refiera concretamente a los márgenes, pero ya sabes que es lo mismo para padding, border y puede que alguna propiedad más.

Saludos,

caricatos · #13 (**permalink**) 04/12/2004, 09:00

Hola Javi:

Buena información

... Espero acordarme en el futuro

Saludos

richardinj · #14 (**permalink**) 10/02/2006, 13:11

A mi no me sale...

Puse una capa y nunca aparece en el centro de la pantalla, por mas que cambie la resulucion... siempre aparece en la esquina superior derecha.... porque?

<div id="datos" style="position:absolute; margin-left:auto; margin-right:auto; border:1px width:457px; height:138px; z-index:1"></div>

JavierB · #15 (**permalink**) 10/02/2006, 13:19

Hola richardinj

Quitale position:absolute y debería funcionarte. También falta un punto y coma después de border:1px pero supongo que será un error al poner el mensaje.

Saludos,