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

Tips
1

image
(Bottom align. pretty sexy, right?)

image
(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!

7 Likes
2

@alejandrowunderlich

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

3

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

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

1 Like
5

We should prob start a CSS hack thread @alejandrowunderlich

1 Like
6

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?

1 Like
7

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

2 Likes
8

That would be legendary!!

9

Hey @alejandrowunderlich,

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

Thanks in advance :slightly_smiling_face: :computer:

10

  1. Drop a HTML on the page.

  2. Put: <style> #center { display: flex; align-items: center; height: auto; } </style> inside the HTML (or in header, if it is a paid app plan).

  3. Give the #center to the text element ID that you need to be vertically centered (without the #).

  4. Done!

1 Like
11

Great, thanks @Landowski.

Does this work for groups?

12

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.

1 Like
13

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!

14

This worked for me, thanks

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

15

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!