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
For my css it's just padding, border-radius, and background-color at the moment.
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
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
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•3y ago
Message Not Public
Sign In & Join Server To View
Barnacles 😂 ! That didn't work but thanks for the suggestion though! I will keep that in my toolbox 🧰 in the future
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
I didn't see a change but it's probably because of what MarkBoots was talking about with the descenders
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Yes, nice! What changed? Is it because of the font-family that aligns the text to the emoji?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
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•3y ago
Message Not Public
Sign In & Join Server To View
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 🤣