I think the best way for them to understand my problem is to see it in their browsers first. Thus, I have reduced the code (it was quite a lot) to the minimum possible for easy study, omitting style sheets (among other things). Here the code :
<!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>
As can be seen, there is a div with id="login" that is intended to be a composition of a message ("Login") and an image that represents the user image.
My problem is that the middle horizontal line of the text is not aligned with the middle horizontal line of the image, that is, the text and the image are not aligned. How do I align both elements?
This brings me to a problem that I have run into on more than one occasion. Why, when I create a div with an image inside, the size of the div, if I don't touch anything, doesn't enclose the image? If the height of the image is greater than that of the div, the div does not reset its height to that of the image , observable in this project as well.
These would be the two problems that assail me in this exercise. Thank you :)
To align the elements inside a div you can use CSS, the property would be
display:flex
. I show an example.The example code works as follows:
display:flex
on the parent div.justify-content:center
Horizontally centers the child elements of the div.align-items:center
vertically centers the child elements of the div.I hope this has been of help to you.