Align Text Center Vertical?

Is there a way to align this text centered vertical? I want "Click to Expand moved upward.

Because the Text component doesn’t have a vertically center text option, the easiest way to accomplish this is to break the text into two separate blocks of text. Then place them inside a Flex component, where you will gain the ability to center the two blocks vertically.

Normally, you should be able to do this in the typography component where you could use the Tailwind align-middle class but it appears Elements does not yet support these alignment classes. At least from what my testing shows.

This is what it looks like when done with a flex and two text blocks.

Thanks @handshaper. Super cool way to do this. Lots of settings to tweak the spacing. A bit challenging to get it set up in the Accordion, but after a few attempts I got it working.

Awesome, @bruce looks cool!

if you apply align-middle to the text class then it aligns, depends on what is aligned

Yes, it works on the inline text but not if applied to the text or typography component.

1 Like