[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