I am trying to do this:
but I've only managed to do this, I can't bring down the "teacher" just below the name:
this is my html:
.image--cover {
width: 55px;
height: 55px;
border-radius: 50%;
margin: 20px;
object-fit: cover;
object-position: center right;
}
.users{
text-decoration: none;
color: #374457;
font-size: 18px;
font-weight: bold;
}
<div class="container">
<a href="#" class="users">
<img src="https://res.freestockphotos.biz/pictures/10/10678-illustration-of-a-female-user-icon-pv.png" class="image--cover img-responsive">
<span class="header-username">Lucia Sandoval</span>
<span style="color: #929293; font-weight: 100">Docente</span>
</a>
</div>
I normally use
display flex
to get you centered vertically as well.Note that I add a new one
div
with the classcontainer-username
that groups the name and the word "Teacher" to manipulate them both withdisplay flex
The element is displayed online (by default it has
display: inline
).You can make the image "float" and add to the second span
display: block
you can put an extra container for the user info:
It's because the span element is inline and if you put 2 spans together they are going to be placed next to each other, add "display: block" as a style to your span element and it will be one below the other