Es un buen planteamiento. Poniendola de fondo pudiera ser mas sencillo. El
tema estaría en que función cumple dicha imagen.
1. Es decorativa?
2. Aporta información?
Pinso que si fuera meramente decorativa cosa del Css, si fuera parte del
contenido en el html. aunque claro, es una mera oìnión.
Saludos
Jaume
El 25 de marzo de 2011 12:17, alvaro touzon sastre <scorpiondea...@yahoo.com
> escribió:
> 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
>
_______________________________________________
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
