I have a problem with the text next to an icon or img :
What happens is that I want to show that text as if it were in the center of the image, but so that it stays like this, next to the image. I have tried to do it with vertical-align: middle
but it does not work as you will see below.
HTML code:
<span>
<img src="res/img/code-outline-icon.png" alt="icono de un codigo en una hoja">
<h3>Lenguajes de programación y tecnologías</h3>
</span>
CSS code:
.body-briefcase span {
display: flex;
margin-left: 5%;
margin-top: 10%;
}
.body-briefcase span img {
height: 48px;
width: 48px;
}
.body-briefcase span h3 {
vertical-align: middle;
margin-left: 1em;
}
Please, if anyone has any ideas or a solution to the problem, pass it on to me, I will gladly receive it.
Since you're using flex, add the align-items css property to your span
I'll tell you this:
span
must not be a container of a block element like in this case theh1
Example: