Centrar tabla con CSS

tunait · #1 (**permalink**) 27/12/2003, 11:20

A las buenas....

A ver... el atributo align en el tag table coloca la tabla centrada ok? (no el contenido)

Vale. Ahora quiero hacerlo mediante CSS.

¿cómo #!?%@!!= [

] &&¨{

} se le indica lo mismo desde una hoja de estilos??

No me vale lo de text-align que yá me he hinchao a ponerlo y sólo sirve en explorer pero no en el resto.

Ni siquiera si le meto delante un <div class="centro"> (teniendo .centro{text-align: center} funciona.

¡¡¡¡¡¡no se centran las tablas en css o qué????

p.d. me tenía que haber dedicado a la botánica.... estaría menos estresada

JavierB · #2 (**permalink**) 27/12/2003, 12:01

Hola, tunait.

No se si será esto a lo que te refieres, pero por si acaso ahí va:

<div style="text-align:center;width:100%">
<table>
...

Ya contarás que tal te ha ido. Saludos y Feliz Año.

tunait · #3 (**permalink**) 27/12/2003, 12:12

Hola Javier

Nop, eso yá lo he probado, sólo furula en explorer.... no sé por qué NS no centra las tablas ni siquiera cuando están dentro de un div con un text-align al centro

Ahí está el tema, que yo tán felíz mirándolo en explorer hasta que lo miro en el otro y resulta que no hace caso (mozilla, of course, tampoco)

Como precisamente son NS y mozilla los que sí se ciñen a las especificaciones CSS por eso pregunto, cuál es la forma "oficial" de hacer esto

gracias Javier, felíz año guevo pa tí también

caricatos · #4 (**permalink**) 27/12/2003, 12:24

Hola Tunait y JavierB

:

Creo que JavierB te quiso mostrar lo de "width: 100%"...

A mi me había pasado algo parecido, y conseguí centrar (no recuerdo qué) poniendo eso del width.

Saludos y felicidades

tunait · #5 (**permalink**) 27/12/2003, 12:30

Hola Caricatos

hum...

buena idea lo de la anchura al 100%....

pero tampoco funciona

Tiene que haber alguna forma

thanks...

caricatos · #6 (**permalink**) 27/12/2003, 12:51

Hola otra vez:

La celda está también al 100%...

... has probado ponerle un borde para ver la distribución...

Con este código veo el contenido centrado (explorer y mozilla)

Código PHP:

  <div align=center width=100%>

<table style="width:50%" border=1>

    <tr>

        <td style="text-align: center; width: 100%">

            Hola

        </td>

    </tr>

</table>

</div>

Si no te sirve, puedes ponernos un enlace para ver como lo tienes (o el trozo de código).

Saludetes

JavierB · #7 (**permalink**) 27/12/2003, 13:08

Hola tunait y caricatos.

Tienes razón tunait, el NS se pasa mi código por... Bueno te dejo esta página a ver si le sacas algo de probecho.

http://www.tierradenomadas.com/tw003.phtml#a

Saludos,

tunait · #8 (**permalink**) 27/12/2003, 13:22

Caricatos

tienes razón, el código que dejaste funciona ok en mozilla peeeero.... no funciona desde una hoja de estilos:

Fíjate que esto no funciona

Código:

<style type="text/css">
#centra {
	align: center;
}
</style>



<div id="centra" width=100%>
<table style="width:50%" border=1>
    <tr>
        <td style="text-align: center; width: 100%">
            Hola
        </td>
    </tr>
</table>
</div>

Sabes qué pasa... que el atributo align está desaprobado por la w3c, incluso en el tag div.

Y el atributo style, también está desaprobado.

El sitio inicialmente estaba con un align normal y corriente en table, que funciona de coña. Pero es que estoy re-escribiendo todo el código de acuerdo a xhtml 1.1, por eso busco la forma de centrar las tablas y no hay forma....

Si se te ocurre otra idea....

Javier

Cita:

el NS se pasa mi código por...

....donde no pasa el viento???

Gracias por el enlace, es de mis favoritos, pero desgraciadamente no me sirve para las tablas, salvo que las meta dentro de una capa de posición absoluta. El centrado con márgenes sólo sirve en capas de posición absoluta, y necesito que ocupe su espacio dentro del flujo del documento.

buaaaaaahhhhhhh

estoy abierta a más sugerencias

tunait · #9 (**permalink**) 27/12/2003, 17:05

<coros de aleluyah> Eureka!!! </coros>

Lo encontré!! si a cabezona no me gana nadie ....

Lo que pasa que ahora no anda en explorer, pero con un parche se ha solucionado y no he tenido que volver a abrir los tropecientosmil documentos pa añadir ná

Bueno, pues pa alinear una pajolera tabla desde una hoja de estilos hay que pedirle:

margin-left: auto;
margin-right: auto

poldió me siento agotada.....

JavierB, Caricatos... mil gracias por echarme una mano

caricatos · #10 (**permalink**) 27/12/2003, 17:09

Hola otra vez:

Lo que me ha funcionado, para centrar la tabla es con display: inline (aunque no sé que tendrá que ver...

)... Pero el borde se vé fatal...

Espero que al menos sirva para avanzar un poco en la resolución...

Por cierto... el estilo align no lo conocía (pensaba que solo había text-align), o hay elementos que se pueden alinear así. ¿?

Felicidades

caricatos · #11 (**permalink**) 27/12/2003, 17:14

Otro choque... ¡cómo en los viejos tiempos!...

Me alegro de que te funcionase...

Saludetes

tunait · #12 (**permalink**) 27/12/2003, 17:20

Juás, sip, hemos llegado al mismo tiempo, parece

Cita:

el estilo align no lo conocía

en realidad se me escapó al pegarlo. Es que explorer lo acepta (al menos el mío, que es a pedales) y puestos a probar todo tipo de combinaciones pobré a sacarle el text- y así se quedó, pero en realidad es text-align.

Aunque desconozco si existe el atributo align en css, yo creo que no.... pero no lo puedo asegurar, el tema es tán amplio que no doy abasto pa estar al corriente de todo

JavierB · #13 (**permalink**) 28/12/2003, 05:06

Bien por tunait.

Ahora un par de cosillas, por incordiar un poco:

- Con margin-left:auto;margin-right:auto has conseguido que se centre en NS ¿Como lo has hecho con el Explorer?

- Con ese código he podido centrar una tabla, pero no me ha funcionado con una imágen ¿Alguien sabe porqué?

Saludos a todos.

terminux · #14 (**permalink**) 28/12/2003, 10:06

Los elementos de bloque como una tabla se centran en CSS con margin-right:auto; y margin-left:auto;

Pero IExplorer implementa horriblemente CSS y eso no funciona, con lo cual hay que usar un error en su implementación de css para centrar una tabla y aplicar el atributo text-align:center; al contenedor de esa tabla (como habeis comprobado es un error de interpretación CSS del explorer y en el resto de navegadores no centra la tabla)

Código PHP:

   
/*CSS*/

 
.necesario_pa_el_puto_Iexplorer { /*sólo para explorer*/

text-align:center;

}

body>html .necesario_pa_el_puto_Iexplorer { /* para navegadores que cumplan CSS2*/

text-align:left;

}

 
table.centrada {

margin-right:auto;

margin-left:auto;

}

 
table.centrada td {

text-align:left; /* para que no hereden las celdas en Iexplorer el centrado del texto*/

}

 
/*HTML*/

 
<div class="necesario_pa_el_ puto_Iexplorer>

<table class="centrada"  width="50%" border=1>

<tr>

<td> hola </td>

<td>hola2 </td>

</tr>

</table>

</div>

Por cierto para centrar una imagen debería funcionar igual que para centrar una tabla si no recuerdo mal

JavierB · #15 (**permalink**) 28/12/2003, 14:51

Gracias terminux.

Después de leer tu mensaje encontré una solución parecida en el enlace que le puse a tunait

Voy a escribir 1.000 veces "Prometo leer más atentamente las páginas que recomiende" (ni que decir tiene que usaré copy&paste

)

Saludos,

JavierB · #16 (**permalink**) 29/12/2003, 06:12

Hola de nuevo.

Yo sigo con mi tema o sea centrar una imágen en NS. Para una tabla pongo esto:

<table width="75%" border="1" style="margin-left:auto;margin-right:auto">

Y la centra sin problema. Pero intento hacer lo mismo con una imágen...

<img src="imagen1.gif" width="88" height="31" style="margin-left:auto;margin-right:auto">

y pasa de mí olimpicamente. Solo lo he conseguido poniendole dentro de un <div> y dandole el estilo.

¿Sabeis de alguna otra forma?

Gracias y Feliz Año.

tunait · #17 (**permalink**) 29/12/2003, 06:25

Hola Javier

las imágenes nunca han tenido una propiedad de centrado, siempre han dependido de una alineación de párrafo o de celda

, no así las tablas, que sí tienen su manera propia tanto en html como en css.

Dudo que exista la forma, de todas maneras investigaré un poquito a ver si existe la forma de centrar una imagen sin usar un alineamiento de párrafo.

por cierto que yá tengo colgados los cambios, los hice al sitio de mi perfil (por si le quieres echar un ojo). Al final validé como xhtml 1.0, que aún tolera los iframes. De momento no puedo prescindir de ellos... no les encuentro alternativa de momento.... habré de enterarme de cómo funcionan los xframes esos

si alguien sabe algo, me lo cuente por favor

terminux · #18 (**permalink**) 29/12/2003, 17:33

JavierB añadele a la imagen la propiedad display:block; y te lo centrará, el siguiente ejemplo en funciona:

Código PHP:

  <html>

<head> <title></title></head>

<body>

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

<img style="margin-left: auto; margin-right:auto; display: block;" 

src="addpoll.gif" title="" alt="">

 
</div>

 
</body>

 
</html>

el div con text-align:center sólo es necesario para Iexplorer

JavierB · #19 (**permalink**) 30/12/2003, 02:50

Muchas gracias terminux.

Otra cosa más que tengo que anotarme. Dentro de poco tendré que cambiar de libreta

Saludos y Feliz Año a todos.

gizmo_marco · #20 (**permalink**) 25/01/2005, 16:13

Creo que no es tan necesaria la etiqueta Div para este ejemplo. Para mi gusto está de más y sin ella jala muy bien el ejemplo propuesto. Por lo menos yo lo he probado en Netscape, Iexplorer, Opera, Firefox y Safari. Si ademas, estas metiendo tu imágen adentro de una celda de tabla, no es necesaria la propiedad display: block. Basta con ponerle de estilo a la celda text-align: center;

PascalC · #21 (**permalink**) 25/01/2005, 19:39

Habiais olvidado usar una DTD correcta :

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

o

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Con una DTD entera, IE funciona mejor y comprende margin-left:auto; y margin-right:auto;. Trabajar en modo quirks (sin DTD) es complicarse el trabajo :)

JavierB · #22 (**permalink**) 26/01/2005, 11:06

Hola gizmo_marco Bienvenido al foro.

Es cierto que el <div> no es necesario. El mensaje empezó centrando una tabla, terminó centrando una imágen y en su momento no se me/nos ocurrió otra forma de lograrlo.

PascalC: totalmente de acuerdo contigo. Pero date cuenta de que este mensaje tiene más de 1 año de antigüedad. Antes no se hablaba tanto en este foro sobre los doctype, yo desde luego no tenía ni idea de que era eso. Ahora que ya se algo más procuro usarlo

Saludos,

PascalC · #23 (**permalink**) 26/01/2005, 11:11

buff ! no habia visto la fecha del mensaje inicial :)

Khronos · #24 (**permalink**) 07/02/2005, 06:22

Usando el buscador de FDW para encontrar información sobre centralización de capas, me encontré por casualidad con este post.

Igual que tunait, también estuve matándome tratando de centrar una tabla usando CSS y evitando el atributo align en el tag table.

Den entre todas las respuesta, probé con lo que dijo terminux:

Cita:

Los elementos de bloque como una tabla se centran en CSS con margin-right:auto; y margin-left:auto;

Pero IExplorer implementa horriblemente CSS y eso no funciona, con lo cual hay que usar un error en su implementación de css para centrar una tabla y aplicar el atributo text-align:center; al contenedor de esa tabla (como habeis comprobado es un error de interpretación CSS del explorer y en el resto de navegadores no centra la tabla)

Código:
/*CSS*/

.necesario_pa_el_puto_Iexplorer { /*sólo para explorer*/
text-align:center;
}
body>html .necesario_pa_el_puto_Iexplorer { /* para navegadores que cumplan CSS2*/
text-align:left;
}

table.centrada {
margin-right:auto;
margin-left:auto;
}

table.centrada td {
text-align:left; /* para que no hereden las celdas en Iexplorer el centrado del texto*/
}

/*HTML*/

<div class="necesario_pa_el_ puto_Iexplorer>
<table class="centrada" width="50%" border=1>
<tr>
<td> hola </td>
<td>hola2 </td>
</tr>
</table>
</div>

Ok, esto funciona perfecto, pero… me queda una duda…

tunait… tu decias:

Cita:

coros de aleluyah> Eureka!!! </coros>

Lo encontré!! si a cabezona no me gana nadie ....

Lo que pasa que ahora no anda en explorer, pero con un parche se ha solucionado y no he tenido que volver a abrir los tropecientosmil documentos pa añadir ná

Bueno, pues pa alinear una pajolera tabla desde una hoja de estilos hay que pedirle:

margin-left: auto;
margin-right: auto

Ahora, a qué parche te referías?

PascalC · #25 (**permalink**) 07/02/2005, 07:45

Supongo que se referia a poner una DTD, lo que no es un parche sino algo teoricamente obligatorio ;)