How to center my text vertically?

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.

Any ideas??


Here is my site Read-Only:

Hi there,

Centering text using flexbox in Webflow is straightforward. Here’s how to do it:

  1. Select the parent element
  2. In the Style panel > Layout > Display, set it to Flex
  3. Click the center cell of the align box (or choose Center from both X and Y axis dropdowns)

This will vertically and horizontally center the text within its parent element.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

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.

I’ve tried wrapping it in a div block, and doing this, but nothing changes?

I don’t think that’s it. I already have the line-height set to the same value as the element. (3 REMs)

Sharing a read-only link to your project is a requirement to get help in this category (and many others). Please update your post.

1 Like

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

If you want it to offset that extra value from the font you can maybe increase the bottom padding on the parent container. I hope this helps.

Thanks @Pablo_Cortes! That explains why I couldn’t find a solution, and makes me feel better. :slightly_smiling_face:

Do you mind sharing how you figured this out? This would be super handy to know for next time. Thanks!!

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.

1 Like