Creo que la mejor manera de que entiendan mi problema es que, en primer lugar, lo vean en sus navegadores. Así, he reducido el código (era bastante) al mínimo posible para su fácil estudio, omitiendo hojas de estilos (entre otras cosas). Aquí el código:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Papelería María</title>
<style type="text/css">
#login img{
width: 40x;
height: 40px;
}
</style>
</head>
<body>
<div id="login">
<p align="right"><img src="imagenes/login.png" alt="login" align="right"/>Iniciar Sesión</p>
</div>
<div id="cabecera">
<p id="titulo">PAPELERÍA MARÍA</p>
<ul id="nav">
<li id="home"><a href="index.html">Home</a></li>
<li id="libros"><a href="libros.html">Libros</a></li>
<li id="pagina_3"><a href="pagina_3.html">Página_3</a></li>
<li id="pagina_4"><a href="pagina_4.html">Página_4</a></li>
</ul>
</div>
<div id="hoja">
<div id="ofertas">
<!--Aquí iría el contenido de la página, irrelevante para el caso-->
</div>
</div>
<footer>
<!--Aquí iría información de contacto, irrelevante para el caso-->
</footer>
</body>
</html>
Como puede observarse, hay un div con id="login" que pretende ser una composición de un mensaje ("Iniciar Sesión") y una imagen que representa a la imagen de usuario.
Mi problema es que la línea horizontal media del texto no queda alineada con la línea horizontal media de la imagen, es decir, que texto e imagen no están alineados. ¿Cómo alineo ambos elementos?
Esto me lleva a un problema que me he encontrado en más de una ocasión. ¿Por qué, cuando creo un div con una imagen dentro, el tamaño del div, si no toco nada, no engloba a la imagen? Si la altura de la imagen es mayor a la del div, el div no reajusta su altura a la de la imagen, observable en este proyecto también.
Estos serían los dos problemas que me asaltan en este ejercicio. Gracias :)