Re: [Ovillo] Centrar horizontal y verticalmente una imagen dentro de un div
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=x / /div h4Aqui el título de la oferta/h4 pAquí 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=resaltadoMá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
Re: [Ovillo] Centrar horizontal y verticalmente una imagen dentro de un div
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=x / /div h4Aqui el título de la oferta/h4 pAquí 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=resaltadoMá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
Re: [Ovillo] Centrar horizontal y verticalmente una imagen dentro de un div
Tienes razón Jaume, en este caso como también es contenido debería colocarse con la etiqueta img de html. Otra opción es utilizar un redimensionador de imágenes en el servidor, para que siempre la devuelva con el mismo tamaño y se pueda maquetar siempre en el mismo sitio alineada arriba. Saludos Gerardo El 25 de marzo de 2011 12:52, jaume op jaum...@gmail.com escribió: 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=x / /div h4Aqui el título de la oferta/h4 pAquí 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=resaltadoMá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
Re: [Ovillo] Centrar horizontal y verticalmente una imagen dentro de un div
En principio para conseguir que todas las imagenes tuvieran el mismo width, se podria hacer con css.Ya que el navegador redimensiona ancho y alto atraves de una sola medida. div class=imagen img src=img/1img_viajes.gif alt=x / /div .imagen{width:120px;} .imagen img{width:100px;} Saludos Jaume ___ 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