CODEWITHSUNDEEP
htmlcss
Yanb
Yanb

Reputation: 700

How to align an inline <p> at the center of the line with greater width in HTML?

I have this code for showing the information about an user:

.creator-name {
    margin: 0;
    display: inline;
}

.face {
    height: 32px;
    display: inline;
    border-radius: 16px;
}

.creator {
    float: right;
    border: 4px solid #ddd;
    padding: 16px;
    border-radius: 0 16px 0 16px;
}
<div class="creator">
    <img class="face" src="https://picsum.photos/400">
    <p class="creator-name">username</p>
</div>

But the username isn't aligned properly. I want to change the CSS somehow to make the username text to be aligned at the center of the line.

Upvotes: 1

Views: 36

Answers (4)

fahad
fahad

Reputation: 1

 
.face {
    height: 32px;
    border-radius: 16px;
}

.creator {
    float: right;
    display: flex;
    width: 105px;   
    justify-content: space-around;
    align-items: center;
    border: 4px solid #ddd;
    padding: 16px;
    border-radius: 0 16px 0 16px;
}
<div class="creator">
    <img class="face" src="https://picsum.photos/400">
    <p class="creator-name">username</p>
</div>

Upvotes: 0

user16793777
user16793777

Reputation:

Try this: margin: 0px 0px 20px 0px; line-height: 1.5; display: inline-block; vertical-align: middle;

Upvotes: 0

sulox32
sulox32

Reputation: 428

I added to the creator div display:flex and align-items: center

.creator-name {
    margin: 0;
    margin-left: 5px;
    display: inline;
}

.face {
    height: 32px;
    display: inline;
    border-radius: 16px;
}

.creator {
    float: right;
    border: 4px solid #ddd;
    padding: 16px;
    border-radius: 0 16px 0 16px;
    display: flex;
    align-items: center;
}
<div class="creator">
    <img class="face" src="https://picsum.photos/400">
    <p class="creator-name">username</p>
</div>

Upvotes: 2

Abin Thaha
Abin Thaha

Reputation: 4633

You can use flexbox to do that. Check the below snippet.

If you are planning to align it vertically middle, use the align-items property of flexbox

.creator-name {
    margin: 0;
    display: inline;
}

.face {
    height: 32px;
    display: inline;
    border-radius: 16px;
}

.creator {
    float: right;
    display: inline-flex;
    align-items: center;
    border: 4px solid #ddd;
    padding: 16px;
    border-radius: 0 16px 0 16px;
}
<div class="creator">
    <img class="face" src="https://picsum.photos/400">
    <p class="creator-name">username</p>
</div>

Upvotes: 3

Related Questions