[Ovillo] Texto centrado respecto al ancho de una imagen
AraDaen
aradaen en gmail.com
Lun Sep 18 10:31:40 UTC 2006
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?
Más información sobre la lista de distribución Ovillo