Así funciona:
http://www.treeweb.es/ShareCode/4f5b30d0ccebc21a3741ed38f2ef305a
Lo que pasa es que si usas algún cms tendrás que cambiar la vista para
añadir el style del bloque imagen.
El 24 de marzo de 2011 14:48, Montserrat Vázquez Hernando
<mvazq...@ceca.es>escribió:
> 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
>
_______________________________________________
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
