Centrar tabla con CSS

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 ;)