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. > > > .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
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 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 > > To: "Ovillo, la lista de CSS en castellano" > > 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; > > } > > > > > > > > > > > > > > > > Aqui el título 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. > > Aquí la descripción de la oferta.Más info > > ... > > > > > > ¿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
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 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 > To: "Ovillo, la lista de CSS en castellano" > 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; > } > > > > > > > > Aqui el título 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. > Aquí la descripción de la oferta.Más info > ... > > > ¿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
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 To: "Ovillo, la lista de CSS en castellano" 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; } Aqui el título 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. Aquí la descripción de la oferta.Más info ... ¿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
Está perfecto El 24 de marzo de 2011 15:56, jaume op escribió: > Centrandome en lo concerniente a la imagen mira esto, puedes probarlo con > diferentes dimensiones de la imagen. La parte del texto ya es otra cosa, > igual convendría meterlo en otro DIV para poder formatearlomejor. > > Mira a ver: > http://www.treeweb.es/ShareCode/47bd11e105526d581f1b5da0d9a76fa8 > > Espero te sirva. > 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 > ___ 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
Centrandome en lo concerniente a la imagen mira esto, puedes probarlo con diferentes dimensiones de la imagen. La parte del texto ya es otra cosa, igual convendría meterlo en otro DIV para poder formatearlomejor. Mira a ver: http://www.treeweb.es/ShareCode/47bd11e105526d581f1b5da0d9a76fa8 Espero te sirva. 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
Re: [Ovillo] Centrar horizontal y verticalmente una imagen dentro de un div
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 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; > > } > > > > > > > > > > > > > > saludos > > > > > > > > > > > >> El 24 de marzo de 2011 14:19, Montserrat Vázquez Hernando > >> 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; > >>> } > >>> > >>> > >>> > >>> > >>> > >>> > >>> > >>> Aqui el título 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. > >>> Aquí la descripción de la oferta.Más info > >>> ... > >>> > >>> > >>> ¿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
Re: [Ovillo] Centrar horizontal y verticalmente una imagen dentro de un div
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; > } > > > > > > > saludos > > > > > >> El 24 de marzo de 2011 14:19, Montserrat Vázquez Hernando >> 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; >>> } >>> >>> >>> >>> >>> >>> >>> >>> Aqui el título 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. >>> Aquí la descripción de la oferta.Más info >>> ... >>> >>> >>> ¿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
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; } saludos > El 24 de marzo de 2011 14:19, Montserrat Vázquez Hernando > 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; > > } > > > > > > > > > > > > > > > > Aqui el título 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. > > Aquí la descripción de la oferta.Más info > > ... > > > > > > ¿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
Buenas tardes Gerardo, me temo que no es el mismo caso. El primero que propones no es posible, puesto que la imagen (o imágenes pues este div se repite n veces en la página, una por cada oferta que presento) no puede ir de background; y en cuanto a la segunda, el dichoso div que contiene la imagen no puedo referenciarse en función del body, puesto que no es único ... jejeje parecía muy fácil pero llevo ya un buen rato. De cualquier forma, gracias por tu aportación. Saludos, Montserrat Vázquez Hernando mvazq...@ceca.es El 24/03/2011 14:25, Gerardo Oscar Jimenez Tornos escribió: > ¿Te valdría ponerla como imagen de fondo centrada y sin repetir? > > http://www.treeweb.es/TreeWeb/Articulos/HTML-y-CSS/Centrar-imagen-de-fondo-en-una-pagina > > Si no también puedes probar algo de esto: > http://www.treeweb.es/TreeWeb/Articulos/HTML-y-CSS/Centrar-un-div-en-una-pagina > > > > > El 24 de marzo de 2011 14:19, Montserrat Vázquez Hernando > 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; >> } >> >> >> >> >> >> >> >> Aqui el título 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. >> Aquí la descripción de la oferta.Más info >> ... >> >> >> ¿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
¿Te valdría ponerla como imagen de fondo centrada y sin repetir? http://www.treeweb.es/TreeWeb/Articulos/HTML-y-CSS/Centrar-imagen-de-fondo-en-una-pagina Si no también puedes probar algo de esto: http://www.treeweb.es/TreeWeb/Articulos/HTML-y-CSS/Centrar-un-div-en-una-pagina El 24 de marzo de 2011 14:19, Montserrat Vázquez Hernando 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; > } > > > > > > > > Aqui el título 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. > Aquí la descripción de la oferta.Más info > ... > > > ¿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
[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; } Aqui el título 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. Aquí la descripción de la oferta.Más info ... ¿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