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

davidj · #1 (**permalink**) 15/11/2013, 04:08

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!!

pzin · #2 (**permalink**) 15/11/2013, 04:45

Pues ayer mismo alguien preguntaba lo mismo. Debería de funcionar para IE8 también.

davidj · #3 (**permalink**) 15/11/2013, 05:31

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?

pzin · #4 (**permalink**) 15/11/2013, 08:20

Acabo de probalo en browserstack con IE8 y funciona bien.

http://jsfiddle.net/aLbj3

davidj · #5 (**permalink**) 15/11/2013, 10:01

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

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

Un saludo!

jonni09lo · #6 (**permalink**) 15/11/2013, 10:10

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<!DOCTYPE html>

Para html5 ó

Código HTML:

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

Para html4

Cita:

Iniciado por pzin

Acabo de probalo en browserstack con IE8 y funciona bien.

http://jsfiddle.net/aLbj3

Has usado IE?? Es el fin del mundo

Saludos

davidj · #7 (**permalink**) 15/11/2013, 10:48

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

Cita:

Iniciado por jonni09lo

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<!DOCTYPE html>

Para html5 ó

Código HTML:

Ver original<!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

jonni09lo · #8 (**permalink**) 15/11/2013, 11:07

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

davidj · #9 (**permalink**) 15/11/2013, 11:26

Cita:

Iniciado por jonni09lo

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...