Efectivamente tenías razón, este código es más correcto, aún así me temo
que no funciona ... Gracias!
Montserrat Vázquez Hernando
Business Intelligence y Servicios Interactivos
Confederación Española de Cajas de Ahorros (CECA)
915965078
mvazq...@ceca.es
El 24/03/2011 14:37, Diego Burich escribió:
> table-cell se comporta como una celda de una tabla,
> y ahi esta justamente el error, no es la imagen la que debe llevar las
> propiedades que le estas dando,
>
> seria algo como:
>
> #ofertas div.imagen div {
> display: table-cell;
> vertical-align: middle;
> position: relative;
> }
>
> <div class="imagen">
> <div><img src="img/1img_viajes.gif" alt="xxxxx" /></div>
> </div>
>
>
> saludos
>
>
>
>
>
>> El 24 de marzo de 2011 14:19, Montserrat Vázquez Hernando
>> <mvazq...@ceca.es>escribió:
>>
>>> 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
>>
> _______________________________________________
> 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
