Vertically aligning emoji with text within button

So this one is a little odd in the sense that I have a button without a fixed width. The button uses padding to give it its shape. Inside the button I have the words "Got it 👍". Problem is, the 👍 emoji is not vertically aligned with the text. I tried vertical-align: middle and line-height: 1 and that doesn't work. I also can't use position: relative as that would take the emoji out of the flow of the document. Any ideas?
14 Replies
vince
vince3y ago
<p>
Got it <span class="emoji">👍</span>
</p>
<p>
Got it <span class="emoji">👍</span>
</p>
For my css it's just padding, border-radius, and background-color at the moment.
MarkBoots
MarkBoots3y ago
Is has to do with the properties of a font type. the "Got it" text does not contain letters with descenders, that's why visualy it doesnt seem centered. But actually it is
MarkBoots
MarkBoots3y ago
There is not really much you can do. You could try to decrease the line-height (somewhere between 0 and 1) to see if that helps. But that is for every font different and it will cause problems when text is wrapped over multiple lines
vince
vince3y ago
Ah dang. I was hoping there would be a fix but that does make sense I remember reading that somewhere too. I guess I'll have to make the button fixed-width or something 🤔 thanks again!
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
vince
vince3y ago
Barnacles 😂 ! That didn't work but thanks for the suggestion though! I will keep that in my toolbox 🧰 in the future
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
vince
vince3y ago
I didn't see a change but it's probably because of what MarkBoots was talking about with the descenders
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
vince
vince3y ago
Yes, nice! What changed? Is it because of the font-family that aligns the text to the emoji?
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
vince
vince3y ago
haha 😂 I didn't specify a font style so I'm not sure what the default for windows / firefox is Let me try with your font Hm, the font family didn't change it. So weird It might how Mac renders font
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
vince
vince3y ago
Thanks for trying! I think I'll still have to go with a fixed-width container and position the emoji to make it centered though 🤣
Want results from more Discord servers?
Add your server