Align text at the bottom or TRUE center for a consistent, sexy UI

alejandrowunderlich · 2020-08-11T22:22:18.360Z

(Bottom align. pretty sexy, right?)

(True center, not Bubble’s silly vertical center. OH MAMA!)

I’ve seen this question come up time and time again, so let’s put it to rest. You’ll need a little CSS to accomplish this feat of beauty.

Your text elements are really <div> containers. Inside these divs there’s a content class.

Give the desired text element an HTML id. For this purpose, we’ll call it bottomtext and you’ll need to use Flexbox for this purpose. It seems to be the best and most supported practice.

Then on that page’s HTML header, add this bad boy:

#bottomtext {
  display: flex;
}

#bottomtext .content {
  display: inline-block;
  align-self: flex-end;
}

If you need it centered, just replace flex-end with center.

ps. don’t forget to surround your text inside <style> tags!

PEACE!

Nocodify · 2020-08-11T22:46:41.156Z

@alejandrowunderlich

I’ve tried this but can’t seem to get it to work. Any chance you could maybe create a quick example app?

alejandrowunderlich · 2020-08-11T23:20:55.231Z

Nocodify:

I’ve tried this but can’t seem to get it to work.

CAN’T GET IT TO WORK!? NOT ON MY WATCH!

Can you share a screenshot of your setup. Let’s take a gander.

nomorecode · 2020-08-22T17:51:32.861Z

We should prob start a CSS hack thread @alejandrowunderlich

alejandrowunderlich · 2020-08-23T16:31:59.797Z

Great idea! I’m already saving a bunch of my CSS hacks in a journal. I’ll gather as many as I can before we start this. Should be place a “launch” date?

nomorecode · 2020-08-23T17:02:42.737Z

go for it @alejandrowunderlich I gather up some of my interim apps that have deployed some sneaky hacks ready for the launch

chad · 2020-08-24T07:55:08.548Z

That would be legendary!!

hacker · 2020-12-22T22:55:30.092Z

Hey @alejandrowunderlich,

I didn´t get to work.
Can you explain?

Thanks in advance

Landowski · 2021-02-06T21:43:08.379Z

Drop a HTML on the page.
Put: <style> #center { display: flex; align-items: center; height: auto; } </style> inside the HTML (or in header, if it is a paid app plan).
Give the #center to the text element ID that you need to be vertically centered (without the #).
Done!

hacker · 2021-02-07T17:44:10.236Z

Landowski:

center

Great, thanks @Landowski.

Does this work for groups?

emile.elie · 2021-03-18T10:42:08.772Z

It sounds crazy that it’s not a default option.
There is a tick box to align center “center the text vertically”.
But I feel we would also need a tick box align bottom.

jmbarquet · 2021-04-13T16:55:15.941Z

hey @alejandrowunderlich! thanks for the help! I cannot seem to make it work to be horizontally centered even replacing flex-end with center, any ideas? Vertical alignment works fine

Thanks!

ronny.hom · 2022-11-05T18:40:11.501Z

This worked for me, thanks

Screen Shot 2022-11-05 at 11.39.40 AM682×1454 91.8 KB

miss.k.owen · 2023-07-06T09:42:27.237Z

Any ideas what might be stopping this from working on the responsive pages?
It’s working on pages which are not yet upgraded to responsive, but when I copy that exact same element & put it on an responsive page… Nada.

Edited to add that the code is in the settings>header so it picks up on all pages.

p.s. thank you for this thread/code @alejandrowunderlich!