How to align an image and text - html

Question

I am coding a Facebook clone with some changes to enhance my skills, but I have ran into a problem.
I have an image(profile picture) and text(user name) under the <h1> of Home. I am trying to align the text exactly to the center to the right of the image
example:
[
top of image
CENTER OF IMAGE TEXT
bottom of image
] ( what I expected/Wanted)
I am not getting the result I want. Instead, the image the text is at the top to the right of the image.
example:
[
top of image
center of image
BOTTOM OF IMAGE TEXT
](result)
The HTML:
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="icons\my profile.jpg">
<p class="my-user-name">Said User</p>
</div>
</div>
The CSS:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}

Answer 1

Flexbox is perfect for these cases. Change the .personalInfo div to a flexbox by adding the display: flex property. Then you have access to many other properties for centering, etc.
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
width: 30px; /* demo only */
background-color: blue; /* demo only */
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
/* display: inline-block; -> not necessary anymore*/
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
/* FLEXBOX */
.personal-info{
display: flex;
flex-direction: row; /* display children in a horizontal row */
align-items: center; /* vertically align items in the center */
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personal-info">
<img class="sidebar-profile-picture">
<p class="my-user-name">Said User</p>
</div>
</div>

Answer 2

Not sure I understand your requirement correctly.
You can use flex to achieve the below result.
Let me know if this works
.personnal-info {
display:flex;
align-items: center
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="//via.placeholder.com/50x50">
<p class="my-user-name">Said User</p>
</div>
</div>

Answer 3

hey Mihai T thanks for the response ! It actually worked.
But didn't put it in an ideal position.
I actually fixed the problem by putting position: relative; on personnal-info.
Then I put in my-user-name
position: absolute; top: -8px;
PS: It also worked with bottom: -8px; instead of top: -8px.
Thanks !