Forum Academy Marketplace Showcase Pricing Features

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

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

@alejandrowunderlich

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

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

We should prob start a CSS hack thread @alejandrowunderlich

1 Like

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

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

That would be legendary!!

Hey @alejandrowunderlich,

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

Thanks in advance :slightly_smiling_face: :computer:

  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!

Great, thanks @Landowski.

Does this work for groups?

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.

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!