How to align an image and text

Emile Youssef FEGHALI EL 0
Viewed 49

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;
}
alignment text image css html
3 Answers

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>

philale0

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>

Mihai T0

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 !

Emile Youssef FEGHALI EL0
Related