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!

3 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

This post was flagged by the community and is temporarily hidden.

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:

1 Like

That would be legendary!!