Foros del Web » Creando para Internet » CSS »

¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

Estas en el tema de ¿ Como alinear una imagen en horizontal y vertical dentro de un div ? en el foro de CSS en Foros del Web. Hola foreros!! He leído mucho sobre el tema de alinear una imagen dentro de un div (en horizontal y vertical). Cuando debo alinear imágenes uso ...
  #1 (permalink)  
Antiguo 15/11/2013, 04:08
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.067
Antigüedad: 19 años, 3 meses
Puntos: 18
¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

Hola foreros!!

He leído mucho sobre el tema de alinear una imagen dentro de un div (en horizontal y vertical). Cuando debo alinear imágenes uso background-image, sin embargo, existen ocasiones en que se hace recomendable utilizar la etiqueta <img> de toda la vida.

Algo tan sencillo en apariencia se convierte en una odisea. He probado diferentes códigos, pero unos van bien solo con los navegadores más modernos, otros solo con IE...

Necesitaría saber como alinear una imagen dentro de un div (en horizontal y vertical) de manera compatible con navegadores antiguos (IE8) y sin saber previamente que tamaño tendrá la imagen.

Necesito ayuda gracias!!
  #2 (permalink)  
Antiguo 15/11/2013, 04:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 6 meses
Puntos: 2114
Respuesta: ¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

Pues ayer mismo alguien preguntaba lo mismo. Debería de funcionar para IE8 también.
  #3 (permalink)  
Antiguo 15/11/2013, 05:31
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.067
Antigüedad: 19 años, 3 meses
Puntos: 18
Respuesta: ¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

Hola pzin,

gracias por tu aporte pero en IE8 no funciona...

Yo, el centrado vertical y horisontal lo realizo así:
http://pastebin.com/Yp4XshCL

Este sistema me funciona perfecto pero tengo que añadir algún texto (espacio en blanco) o similar al lado, si no, la imagen no centra. ¿ Se te ocurre algo para no tener que añadir ningún espacio o similar al lado?

Última edición por davidj; 15/11/2013 a las 05:38
  #4 (permalink)  
Antiguo 15/11/2013, 08:20
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 6 meses
Puntos: 2114
Respuesta: ¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

Acabo de probalo en browserstack con IE8 y funciona bien.

http://jsfiddle.net/aLbj3
  #5 (permalink)  
Antiguo 15/11/2013, 10:01
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.067
Antigüedad: 19 años, 3 meses
Puntos: 18
Respuesta: ¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

Lo siento compañero pero tengo, entre otros, IE8 y no funciona..

He realizado esto:
http://pastebin.com/a7R6C54Y

Un saludo!
  #6 (permalink)  
Antiguo 15/11/2013, 10:10
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 11 años, 4 meses
Puntos: 397
Respuesta: ¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

Internet Explorer es muy estricto con el uso de <!DOCTYPE> si no lo declaras muchos de los css no funcionaran de la manera correcta. Prueba colocando esto en la primera linea del archivo:

Código HTML:
Ver original
  1. <!DOCTYPE html>

Para html5 ó

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

Para html4

Cita:
Iniciado por pzin Ver Mensaje
Acabo de probalo en browserstack con IE8 y funciona bien.

http://jsfiddle.net/aLbj3
Has usado IE?? Es el fin del mundo

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #7 (permalink)  
Antiguo 15/11/2013, 10:48
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.067
Antigüedad: 19 años, 3 meses
Puntos: 18
Respuesta: ¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

Ya tengo puesto el DOCTYPE aunque no lo tengo insertado en el pastebin y nada...





Cita:
Iniciado por jonni09lo Ver Mensaje
Internet Explorer es muy estricto con el uso de <!DOCTYPE> si no lo declaras muchos de los css no funcionaran de la manera correcta. Prueba colocando esto en la primera linea del archivo:

Código HTML:
Ver original
  1. <!DOCTYPE html>

Para html5 ó

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

Para html4



Has usado IE?? Es el fin del mundo

Saludos
  #8 (permalink)  
Antiguo 15/11/2013, 11:07
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 11 años, 4 meses
Puntos: 397
Respuesta: ¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

El código funciona perfectamente en el Internet Explorer 8 pero no en el 7. ¿Estás seguro que es la versión correcta de IE?

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #9 (permalink)  
Antiguo 15/11/2013, 11:26
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.067
Antigüedad: 19 años, 3 meses
Puntos: 18
Respuesta: ¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

Cita:
Iniciado por jonni09lo Ver Mensaje
El código funciona perfectamente en el Internet Explorer 8 pero no en el 7. ¿Estás seguro que es la versión correcta de IE?

Saludos
Ya entiendo lo que ha pasado. Tenía activado el modo "vista de compatibilidad" en el IE8, lo he desactivado y ahora funciona!

Es curioso.. ¿debería funcionar con el modo vista compatibilidad no?, estos de Microsoft...

Etiquetas: alinear, background, horizontal, vertical
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




La zona horaria es GMT -6. Ahora son las 02:14.