This is super nitpicky, but I can’t seem to get my text to vertically center for this one element. I’ve tried all of the different flexbox settings, and it always seems to sit at the bottom of the text box.
The text size and height size are both the same as well.
It is occurring because you’re applying flex to the text element directly. Put your text element into a div block, then applying the flex settings to the div, not the text element.
Check if the line-height is taller than the element’s height , that usually pushes text off-center. Had this happen in a client build; fixing line-height or setting the parent to align-items: center with no extra padding solved it.
Hello @markdaniel, The issue with your alignment comes from the font you are using, no matter what line height you are using, the box around the font will always have an extra space on top
Hello @markdaniel, Im glad this helped you. So this is a common occurrence with certain fonts, specially if you are going to print something, I kind of learn this the hard way. So next time just select the font you are using and see if the blue outline box covers it fully or if there are extra spaces, and design accordingly. Please mark this as solved so it can be used as reference for other users with similar issues.