Foros del Web » Creando para Internet » HTML »

Problema para alinear imágenes en una tabla

Estas en el tema de Problema para alinear imágenes en una tabla en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/07/2011, 15:48
 
Fecha de Ingreso: mayo-2011
Mensajes: 22
Antigüedad: 5 años, 10 meses
Puntos: 1
Mensaje Problema para alinear imágenes en una tabla

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.

Última edición por laexpo; 27/07/2011 a las 16:00
  #2 (permalink)  
Antiguo 27/07/2011, 16:15
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.721
Antigüedad: 6 años, 2 meses
Puntos: 440
Respuesta: Problema para alinear imágenes en una tabla

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>
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #3 (permalink)  
Antiguo 28/07/2011, 06:15
 
Fecha de Ingreso: mayo-2011
Mensajes: 22
Antigüedad: 5 años, 10 meses
Puntos: 1
Respuesta: Problema para alinear imágenes en una tabla

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.
  #4 (permalink)  
Antiguo 28/07/2011, 06:17
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: Problema para alinear imágenes en una tabla

Pon el codigo css y html de esas celdas.
Saludos
  #5 (permalink)  
Antiguo 28/07/2011, 06:20
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: Problema para alinear imágenes en una tabla

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

img{
margin: auto;
}

y haber que pasa
  #6 (permalink)  
Antiguo 28/07/2011, 06:25
 
Fecha de Ingreso: mayo-2011
Mensajes: 22
Antigüedad: 5 años, 10 meses
Puntos: 1
Respuesta: Problema para alinear imágenes en una tabla

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
  1. #content {
  2.     background-color: #9999FF;
  3.     height: 150px;
  4.     width: 150px;
  5.     margin: 150px;
  6. }
  7. #content .foto {
  8.     max-height:150px;
  9.     max-width:150px;
  10. }

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

Gracias por tus respuestas.
  #7 (permalink)  
Antiguo 28/07/2011, 13:30
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: Problema para alinear imágenes en una tabla

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>Max-width/height en  IE &lt; 9</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. .mw {
  9. max-width: 100px;
  10. max-height: 100px;
  11. width: expression(this.width > 100 ? "100px" : true);
  12. height: expression(this.height > 100 ? "100px" : true);
  13. border: solid 1px #000;
  14. }
  15. /*]]>*/
  16. </head>
  17. <table border="1" cellpadding="5" cellspacing="0" width="100%">
  18. <tr>
  19. <td align="center" valign="middle">
  20. <img src="logo_video_vd.jpg" alt="" class="mw" />
  21. </td>
  22. <td align="center" valign="middle">
  23. <img src="cat-black.jpg" alt="" class="mw" />
  24.  
  25. </td>
  26. <td align="center" valign="middle">
  27. <img src="balloon_text_comic_clouds_07.png" alt="" class="mw" width="384" height="330" />
  28. </td>
  29. </tr>
  30. <p>
  31. Imágenes en tamaño real
  32. </p>
  33. <p>
  34. <img src="logo_video_vd.jpg" alt="" width="180" height="70" /><br />
  35. <img src="cat-black.jpg" alt="" width="144" height="180" /><br />
  36. <img src="balloon_text_comic_clouds_07.png" alt="" width="384" height="330" /><br />
  37. </p>
  38. </body>
  39. </html>

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

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 28/07/2011 a las 13:31 Razón: link erróneo
  #8 (permalink)  
Antiguo 27/10/2011, 19:20
 
Fecha de Ingreso: octubre-2011
Mensajes: 1
Antigüedad: 5 años, 4 meses
Puntos: 0
Respuesta: Problema para alinear imágenes en una tabla

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
  #9 (permalink)  
Antiguo 27/10/2011, 20:24
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: Problema para alinear imágenes en una tabla

@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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 28/10/2011, 08:37
hrmarkz
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema para alinear imágenes en una tabla

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

Etiquetas: align, explorer, ie7, image, internet, tabla, centrar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 12:44.