[Ovillo] Texto centrado respecto al ancho de una imagen
Supongo que será una tontería, pero llevo un par de horas buscando como
hacerlo y no lo logro.
Tengo un pie de pagina que incluye una imagen y un par de líneas de texto,
centrados horizontalmente respecto al pie. Lo que intento hacer es que
además el texto quede centrado verticalmente respecto a la imagen, pero no
lo consigo. He realizado varios intentos pero no lo he conseguido. ¿Alguna
sugerencia?
1er intento:
div#pie{
clear: both;
width: 100%;
text-align:center;
color:#8b7e75;
height:80px;
overflow:auto;
border-top:6px solid #ff6600;
padding-top:10px;
}
img#icono { vertical-align:middle;}
div id=pie
img id=icono src=lib/pics/logoIcon.gif alt=texto
alternativo/ Primera linea de texto
br/
Segunda linea de texto
/div
Resultado Imagen y texto centrado horizontalmente respecto al div
contenedor, pero sólo una de las lineas de texto (la primera) aparecen
centradas verticalmente respecto a la imagen, la segunda queda por debajo.
2o intento: intento agrupar las dos lineas dentro de un elemento para
intentar que queden las dos lineas centradas
div#pie{
clear: both;
width: 100%;
text-align:center;
color:#8b7e75;
height:80px;
overflow:auto;
border-top:6px solid #ff6600;
padding-top:10px;
}
img#icono { vertical-align:middle;}
p {display:inline;}
div id=pie
img id=icono src=lib/pics/logoIcon.gif alt=texto
alternativo/ p
Primera linea de texto
br/
Segunda linea de texto
/p
/div
Resultado mismo resultado que caso anterior.
Alguna ayudita?
___
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] Imagenes de distinto tamaño centradas t anto horizontal como vertical en una línea
Hola!
Al final del codigo que te adjunta DJ-Dom, quiza seria conveniente añadir;
br style=clear: both,
ya que imagenes-cat es un div flotado a la izquierda y quiza te descuadre
tu layout.
Luego ha puesto esto, que supongo será un despiste:
divimg src=UBICACION-DE-LA-IMAGEN.EXTENSION
title=TITULO-DESCRIPTIVOalt=TEXTO-ALTERNATIVO //a/div
ahi o se le ha colado el /a sin abrir, y o bien le sobra, o bien le
falta el a href .
Saludos!
On 9/11/06, DJ-Dom [EMAIL PROTECTED] wrote:
Hola Francisco, yo lo he hecho de este modo:
HTML:
div id=imagenes-cat
div class=imgs-cat
divimg src=UBICACION-DE-LA-IMAGEN.EXTENSION
title=TITULO-DESCRIPTIVO
alt=TEXTO-ALTERNATIVO //a/div
/div
div class=imgs-cat
divimg src=UBICACION-DE-LA-IMAGEN.EXTENSION
title=TITULO-DESCRIPTIVO
alt=TEXTO-ALTERNATIVO //a/div
/div
div class=imgs-cat
divimg src=UBICACION-DE-LA-IMAGEN.EXTENSION
title=TITULO-DESCRIPTIVO
alt=TEXTO-ALTERNATIVO //a/div
/div
div class=imgs-cat
divimg src=UBICACION-DE-LA-IMAGEN.EXTENSION
title=TITULO-DESCRIPTIVO
alt=TEXTO-ALTERNATIVO //a/div
/div
/div
CSS:
#imagenes-cat{
text-align: center;
border: 1px dotted;
margin: 0px auto;
padding: 0px 0px 10px 0px;
width: 99.5%;
float: left;
}
.imgs-cat{
float: left;
width: 73px;
height: 73px;
margin: 8px;
padding: 0px;
text-align: center;
border: 1px solid;
}
.imgs-cat img{
vertical-align: middle;
text-align: center;
margin: 2px;
}
Espero que te sirvan.
Saludo,
DJ-Dom
- Original Message -
From: Francisco Jesús Gil Navarro [EMAIL PROTECTED]
To: ovillo@lists.ovillo.org
Sent: Sunday, September 17, 2006 5:20 PM
Subject: [Ovillo] Imagenes de distinto tamaño centradas tanto horizontal
como vertical en una línea
Hola a todos:
me gustaría saber como colocar 4 imagenes en una sola línea con css, al
estilo de una tabla con cuatro columnas y alineadas al centro.
Gracias.
--
Saludos.
Francisco
__
LLama Gratis a cualquier PC del Mundo.
Llamadas a fijos y móviles desde 1 céntimo por minuto.
http://es.voice.yahoo.com
___
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
--
David Castelló
www.estandaresweb.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
Re: [Ovillo] Texto centrado respecto al ancho de una imagen
On 9/18/06, AraDaen [EMAIL PROTECTED] wrote:
Supongo que será una tontería, pero llevo un par de horas buscando como
hacerlo y no lo logro.
Tengo un pie de pagina que incluye una imagen y un par de líneas de texto,
centrados horizontalmente respecto al pie. Lo que intento hacer es que
además el texto quede centrado verticalmente respecto a la imagen, pero no
lo consigo. He realizado varios intentos pero no lo he conseguido. ¿Alguna
sugerencia?
1er intento:
div#pie{
clear: both;
width: 100%;
text-align:center;
color:#8b7e75;
height:80px;
overflow:auto;
border-top:6px solid #ff6600;
padding-top:10px;
}
img#icono { vertical-align:middle;}
div id=pie
img id=icono src=lib/pics/logoIcon.gif alt=texto
alternativo/ Primera linea de texto
br/
Segunda linea de texto
/div
Resultado Imagen y texto centrado horizontalmente respecto al div
contenedor, pero sólo una de las lineas de texto (la primera) aparecen
centradas verticalmente respecto a la imagen, la segunda queda por debajo.
2o intento: intento agrupar las dos lineas dentro de un elemento para
intentar que queden las dos lineas centradas
div#pie{
clear: both;
width: 100%;
text-align:center;
color:#8b7e75;
height:80px;
overflow:auto;
border-top:6px solid #ff6600;
padding-top:10px;
}
img#icono { vertical-align:middle;}
p {display:inline;}
div id=pie
img id=icono src=lib/pics/logoIcon.gif alt=texto
alternativo/ p
Primera linea de texto
br/
Segunda linea de texto
/p
/div
Resultado mismo resultado que caso anterior.
Alguna ayudita?
Hmmm, yo pondria el div con la imagen dentro y luego un span o p para
meter el texto dentro, asi podes usar el margin o padding del span o p
para mover el texto a mano, o incluso posicionarlo relativamente y
usar top para moverlo.
___
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
--
Hermann Kaser
http://www.theragingche.com/
___
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] Imagenes de distinto tamaño centradas t anto horizontal como vertical en una línea
Como aconsejaron aqui la otra vez: de StripM: Mejor una lista de fotos ¿no? ul lifoto/li lifoto/li lifoto/li lifoto/li ... /ul luego a los li sin border, margin y padding les puedes dar un ancho del 25% y float: left; así consigues las 4 columnas. El día 17/09/06, Francisco Jesús Gil Navarro [EMAIL PROTECTED] escribió: Hola a todos: me gustaría saber como colocar 4 imagenes en una sola línea con css, al estilo de una tabla con cuatro columnas y alineadas al centro. Gracias. -- Saludos. Francisco __ LLama Gratis a cualquier PC del Mundo. Llamadas a fijos y móviles desde 1 céntimo por minuto. http://es.voice.yahoo.com ___ 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 -- -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. Todos los excesos son malos Juzga tu exito, en relacion a lo que tienes que renunciar para ello Confia en Dios, pero cierra bien la puerta -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. ___ 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] Texto centrado respecto al ancho de una imagen
Asias por la ayuda, he optado por meterlo en un div y posicionarlo. Gracias :) ___ 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] Texto centrado respecto al ancho de una imagen
AraDaen:
Probaste poner dentro del pie 2 divs más uno con el texto y otro con la
imagen y luego centrarlos con margin??
Espero que esta solución sirva.
Saludos.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de AraDaen
Enviado el: Lunes, 18 de Septiembre de 2006 07:32
Para: 'Ovillo, la lista de CSS en castellano'
Asunto: [Ovillo] Texto centrado respecto al ancho de una imagen
Supongo que será una tontería, pero llevo un par de horas buscando como
hacerlo y no lo logro.
Tengo un pie de pagina que incluye una imagen y un par de líneas de texto,
centrados horizontalmente respecto al pie. Lo que intento hacer es que
además el texto quede centrado verticalmente respecto a la imagen, pero no
lo consigo. He realizado varios intentos pero no lo he conseguido. ¿Alguna
sugerencia?
1er intento:
div#pie{
clear: both;
width: 100%;
text-align:center;
color:#8b7e75;
height:80px;
overflow:auto;
border-top:6px solid #ff6600;
padding-top:10px;
}
img#icono { vertical-align:middle;}
div id=pie
img id=icono src=lib/pics/logoIcon.gif alt=texto
alternativo/ Primera linea de texto
br/
Segunda linea de texto
/div
Resultado Imagen y texto centrado horizontalmente respecto al div
contenedor, pero sólo una de las lineas de texto (la primera) aparecen
centradas verticalmente respecto a la imagen, la segunda queda por debajo.
2o intento: intento agrupar las dos lineas dentro de un elemento para
intentar que queden las dos lineas centradas
div#pie{
clear: both;
width: 100%;
text-align:center;
color:#8b7e75;
height:80px;
overflow:auto;
border-top:6px solid #ff6600;
padding-top:10px;
}
img#icono { vertical-align:middle;}
p {display:inline;}
div id=pie
img id=icono src=lib/pics/logoIcon.gif alt=texto
alternativo/ p
Primera linea de texto
br/
Segunda linea de texto
/p
/div
Resultado mismo resultado que caso anterior.
Alguna ayudita?
___
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
--
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.1.405 / Virus Database: 268.12.4/449 - Release Date: 15/09/2006
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.405 / Virus Database: 268.12.4/449 - Release Date: 15/09/2006
___
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] Imagenes de distinto tamaño centradas t anto horizontal como vertical en una línea
Yo pondría cada foto en un div y luego los dejaría flotados Saludos -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Sureña Enviado el: Lunes, 18 de Septiembre de 2006 10:28 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo]Imagenes de distinto tamaño centradas tanto horizontal como vertical en una línea Como aconsejaron aqui la otra vez: de StripM: Mejor una lista de fotos ¿no? ul lifoto/li lifoto/li lifoto/li lifoto/li ... /ul luego a los li sin border, margin y padding les puedes dar un ancho del 25% y float: left; así consigues las 4 columnas. El día 17/09/06, Francisco Jesús Gil Navarro [EMAIL PROTECTED] escribió: Hola a todos: me gustaría saber como colocar 4 imagenes en una sola línea con css, al estilo de una tabla con cuatro columnas y alineadas al centro. Gracias. -- Saludos. Francisco __ LLama Gratis a cualquier PC del Mundo. Llamadas a fijos y móviles desde 1 céntimo por minuto. http://es.voice.yahoo.com ___ 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 -- -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. Todos los excesos son malos Juzga tu exito, en relacion a lo que tienes que renunciar para ello Confia en Dios, pero cierra bien la puerta -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. ___ 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 -- No virus found in this incoming message. Checked by AVG Free Edition. Version: 7.1.405 / Virus Database: 268.12.4/449 - Release Date: 15/09/2006 -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.405 / Virus Database: 268.12.4/449 - Release Date: 15/09/2006 ___ 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] Imagenes de distinto tamaño centradas tanto horizontal como vertical en una línea
Gracias DJ-dom, Laura, David Castelló y Sureña. He probado ambas soluciones pero solo sirve si las imágenes tienen el mismo alto, yo tengo cuatro imágenes de distinto tamaño tanto en horizontal como en vertical, y me gustaría que quedaran como en la página http://www.frangiln.jazztel.es/index.html los logos de los patrocinadores, pero están en tablas, no lo consigo con css. Gracias de nuevo por vuestro interés. -- Saludos. Francisco __ LLama Gratis a cualquier PC del Mundo. Llamadas a fijos y móviles desde 1 céntimo por minuto. http://es.voice.yahoo.com ___ 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] Imagenes de distinto tamaño centradas t anto horizontal como vertical en una línea
Un efecto igual al de una tabla lo conseguis aplicando divs anidados (un contenedor y luego uno por cada imagen) podes centrarlas con sus propios margin. Saludos. -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Francisco Jesús Gil Navarro Enviado el: Lunes, 18 de Septiembre de 2006 17:40 Para: ovillo@lists.ovillo.org Asunto: Re: [Ovillo] Imagenes de distinto tamaño centradas tanto horizontal como vertical en una línea Gracias DJ-dom, Laura, David Castelló y Sureña. He probado ambas soluciones pero solo sirve si las imágenes tienen el mismo alto, yo tengo cuatro imágenes de distinto tamaño tanto en horizontal como en vertical, y me gustaría que quedaran como en la página http://www.frangiln.jazztel.es/index.html los logos de los patrocinadores, pero están en tablas, no lo consigo con css. Gracias de nuevo por vuestro interés. -- Saludos. Francisco __ LLama Gratis a cualquier PC del Mundo. Llamadas a fijos y móviles desde 1 céntimo por minuto. http://es.voice.yahoo.com ___ 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 -- No virus found in this incoming message. Checked by AVG Free Edition. Version: 7.1.405 / Virus Database: 268.12.4/449 - Release Date: 15/09/2006 -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.405 / Virus Database: 268.12.4/449 - Release Date: 15/09/2006 ___ 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] Imagenes de distinto tamaño centradas t anto horizontal como vertical en una línea
Es impresionante la diferencia de esos marcos con relieve según se vea con Firefox o Explorer. Con Firefox se ven espectaculares. Para que queden centrados sin tabla debes usar ésto en la etiqueta de imagen: img style=vertical-align: middle que es el equivalente a: img align=absmiddle y poner las fotos dentro de un div con el alto de la foto mayor para que tengan un marco de referencia. Almirante Von Web/. - Original Message - From: Francisco Jesús Gil Navarro [EMAIL PROTECTED] To: ovillo@lists.ovillo.org Sent: Monday, September 18, 2006 5:40 PM Subject: Re: [Ovillo] Imagenes de distinto tamaño centradas tanto horizontal como vertical en una línea Gracias DJ-dom, Laura, David Castelló y Sureña. He probado ambas soluciones pero solo sirve si las imágenes tienen el mismo alto, yo tengo cuatro imágenes de distinto tamaño tanto en horizontal como en vertical, y me gustaría que quedaran como en la página http://www.frangiln.jazztel.es/index.html los logos de los patrocinadores, pero están en tablas, no lo consigo con css. Gracias de nuevo por vuestro interés. -- Saludos. Francisco __ LLama Gratis a cualquier PC del Mundo. Llamadas a fijos y móviles desde 1 céntimo por minuto. http://es.voice.yahoo.com ___ 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
