Hola
Habria algun problema de poner la imagen como fondo y ahi centrar el fondo, eso
funciona sobre todos los navegadores.
________________________________
From: Montserrat Vázquez Hernando <mvazq...@ceca.es>
To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org>
Sent: Thu, March 24, 2011 2:19:05 PM
Subject: [Ovillo] Centrar horizontal y verticalmente una imagen dentro de un div
Buenas tardes,
acudo hoy a vosotros con un problema que apriori puede parecer trivial
pero os aseguro que no lo es. Tengo un div, del que conozco las
dimensiones y dentro debo pintar una imagen, centrada horizontal y
verticalmente, sin saber el tamaño que puede tener, por lo que no puedo
jugar con margins y paddings ... he conseguido que funcione utilizando
"display:table" y "display: table-cell" pero curiosamente SOLO funciona
en IE 8, y no el el resto (IE 7, Firefox y Chrome), para el resto,
cuando la imagen es más pequeña, se pega al top/left.
Os paso extracto de la página:
#ofertas{margin:5px 0 0 280px; width:675px; min-height: 170px;}
#ofertas p{ margin:5px 0}
#ofertas.oferton h4{font:bold 14px Helvetica, Arial,
sans-serif;color:#666;margin-bottom:10px; color:#EC1C24}
#ofertas div.imagen{
border:solid 2px #dadada;
padding:5px;
width:144px;
height:144px;
float:left;
margin-right:10px;
display: table;
}
#ofertas div.imagen img {
display: table-cell;
vertical-align: middle;
position: relative;
}
<div id="ofertas" class="oferton">
<div class="imagen">
<img src="img/1img_viajes.gif" alt="xxxxx" />
</div>
<h4>Aqui el título de la oferta</h4>
<p>Aquí la descripción de la oferta. Aquí la descripción de la oferta.
Aquí la descripción de la oferta.Aquí la descripción de la oferta.
Aquí la descripción de la oferta.<a href="" class="resaltado">Más info
...</a></p>
</div>
¿Se os ocurre como hacerlo para que funcione en todos los navegadores?
--
Montserrat Vázquez Hernando
mvazq...@ceca.es
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
