How to align an image and text-CodePudding

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 >
            <h1 >Home</h1> 
            <a  href="#">Create</a>

            <div >
                <img  src="icons\my profile.jpg">
                <p >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;
}

CodePudding user response：

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 >
    <h1 >Home</h1> 
    <a  href="#">Create</a>

    <div >
        <img >
        <p >Said User</p>
    </div>
</div>

CodePudding user response：

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 >
            <h1 >Home</h1> 
            <a  href="#">Create</a>

            <div >
                <img  src="//via.placeholder.com/50x50">
                <p >Said User</p>
            </div>
        </div>

CodePudding user response：

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 !