Problema para alinear imágenes en una tabla

laexpo · #1 (**permalink**) 27/07/2011, 15:48

Hola a todos!

Es la segunda ves que propongo un problema -la primera no tuve respuesta-, así que espero se entienda claramente. El asunto es bastante básico y va a así:

Quiero centrar una imagen que viene desde una base de datos dentro de una tabla. Como no sé la proporción de la imagen (puede ser vertical o apaisada) porque responde a diversas fichas, le doy el tamaño con la propiedad max-width y max-height que responden, obviamente, al tamaño del contenedor -la tabla en este caso-. Hasta ahí todo bien.

Al <td> de la tabla, para centrar la imagen, tenga el formato que tenga, le otorgo los valores:

Código HTML:

<td style="vertical-align:middle; text-align:center">

Esto funciona perfectamente en todos los navegadores, excepto, como ven en la imagen que inserto a continuación, en Internet Explorer 7, que cuando la imagen es apaisada la corre de marco, generando alguna especie de padding o margen (la imagen se la derecha es el ejemplo del problema).

Me volví loco tratando de meterle parches y cosas, pero no va. Espero que alguien conozca el inconveniente y me pueda facilitar una respuesta.

Saludos y gracias.

Tedel · #2 (**permalink**) 27/07/2011, 16:15

vertical-align no es para alinear imágenes en una caja sino para definir a qué altura se coloca una imagen en comparación con el texto que le acompaña alrededor:

http://www.w3schools.com/cssref/tryi...vertical-align

Compara tú mismo con los valores... baseline, text-top, bottom, middle... y notarás para qué sirve la regla.

Sobre cómo resolver tu dilema, lo más fácil y rápido es usar HTML 4:

<td align="center" valign="middle"></td>

laexpo · #3 (**permalink**) 28/07/2011, 06:15

Gracias por tu respuesta, Tedel.

Probé lo que dijiste y efectivamente vertical-align no me servía. Utilice valign y todo perfecto.

Sin embargo, sigo teniendo el mismo inconveniente en Internet Explorer 7, cuando la imagen es apaisada u horizontal; si bien la centra verticalmente, la desplaza hacia la derecha no sé por qué motivo. Le genera una especie de padding o margen a su izquierda. Es lo mismo que mostraba en la imagen de ejemplo que utilicé al principio.

Batan · #4 (**permalink**) 28/07/2011, 06:17

Pon el codigo css y html de esas celdas.
Saludos

Batan · #5 (**permalink**) 28/07/2011, 06:20

Perdona, no vi bien.
Ponle un margin a las imagenes,

img{
margin: auto;
}

y haber que pasa

laexpo · #6 (**permalink**) 28/07/2011, 06:25

Batan, el html va así:

Código HTML:

<div id="content">
  <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" valign="middle"><img class="foto" src="http://www.laexpo.com.ar/media/files/ficha/2011/06/24/131118/juego_comedor02.png" border="0" /></td>
    </tr>
  </table>
</div>

y el css es así:

Código CSS:

Ver original#content {
    background-color: #9999FF;
    height: 150px;
    width: 150px;
    margin: 150px;
}
#content .foto {
    max-height:150px;
    max-width:150px;
}

Probé con margin y varias cosas más pero sigue el mismo error en ie.

Gracias por tus respuestas.

emprear · #7 (**permalink**) 28/07/2011, 13:30

Con respecto a la alineación, si trabajas en una tabla, con

<td align="center" valign="middle"></td>

es suficiente, no hace falta usar margin, podes manejar el espaciado con el cellpadding de la tabla.
Por lo del ancho máximo, para lograr compatibilidad con las versiones anteriores de IE, necesitas usar las llamadas expresiones/operadores Css para IE.

Código HTML:

Ver original<!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">
<head>
<title>Max-width/height en  IE &lt; 9</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.mw {
max-width: 100px;
max-height: 100px;
width: expression(this.width > 100 ? "100px" : true);
height: expression(this.height > 100 ? "100px" : true);
border: solid 1px #000;
}
/*]]>*/
</style>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td align="center" valign="middle">
<img src="logo_video_vd.jpg" alt="" class="mw" />
</td>
<td align="center" valign="middle">
<img src="cat-black.jpg" alt="" class="mw" />
 
</td>
<td align="center" valign="middle">
<img src="balloon_text_comic_clouds_07.png" alt="" class="mw" width="384" height="330" />
</td>
</tr>
</table>
<p>
Imágenes en tamaño real
</p>
<p>
<img src="logo_video_vd.jpg" alt="" width="180" height="70" /><br />
<img src="cat-black.jpg" alt="" width="144" height="180" /><br />
<img src="balloon_text_comic_clouds_07.png" alt="" width="384" height="330" /><br />
</p>
</body>
</html>

Demo
http://foros.emprear.com/css/imgcel/imgcel.html

Saludos

Basinski · #8 (**permalink**) 27/10/2011, 19:20

Hola,

No logro resolver el problema buscando por aquí, por lo que me he decidido a preguntar. La verdad es que no controlo nada de diseño web. Veamos. Me estoy haciendo una página con Indexhibit. Quería que apareciese una imagen con hipervínculo en la página de inicio. He modificado el .htaccess ... Ahora, en vez de ir directo a index.php, creé un main.php para que se lanzase primero. La imagen del main.php la he vinculado al index.php que ya había. Hasta ahí todo va bien, creo.

Mi problema es el centrado de la imagen en la tabla. Me sale en el centro, pero arriba, pegada a la barra de marcadores de mi navegador. Dejo aquí el código del main.php. He cambiado valores, pero son todo palos de ciego. Disculpad si, incluso, he metido el tema donde no va.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>miwebpersonal.com</title>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td valign="middle" align="center"><a href="/index.php" target="_top"><img src="/images/logo.jpg" width="646" height="187" align="absmiddle" longdesc="/images/logo.jpg" /></a></td>
</tr>
</table>
</body>
</html>

Un saludo

emprear · #9 (**permalink**) 27/10/2011, 20:24

@Basinski
No entiendo que tiene que ver .htaccess con el centrado de la imagen, como sea repuse el ejemplo para que lo puedas observar trabajando
http://foros.emprear.com/css/imgcel/imgcel.html

saludos

#10 (**permalink**) 28/10/2011, 08:37

Para que se alinee verticalmente no hace falta ponerle el width, bastaria con que le pongas el height y el valing en la celda, y que la imágen y la celda sean del mismo tamaño