Forum Academy Marketplace Showcase Pricing Features

Center text vertically

Ohhhhh, ok. Thanks for the clarification. I wonder how common a need that is.

1 Like

Haha no sorry, I guess my post wasn’t very clear at all.

Yes, there is an option “center the text vertically”. However, that option doesn’t actually center the text inside the text element vertically. It will only center the first line vertically. So if you have more than one line of text, you can’t actually center it properly without CSS. (as far as I can tell)

Placing it inside a group and center inside is an option that can get you close, but it won’t work for dynamic text where the text element’s height will expand if you end up with 3 lines instead of 2 for example.

8 Likes

I usually have to play around with line height spacing to get it to be aligned correctly.

Yeah that’s another work around that can work for some cases. Sure would be nice to have a proper center vertically, that worked for all cases with the click of a button :wink:

2 Likes

yes, this is what I understood you to mean from the start. It is very frustrating to not have a true center.

1 Like

We got a few workarounds in the thread now, so adding my usual one as well if someone searches for this topic, and finds it helpful.

I’m using CSS to center the text within the text element. It works on Firefox, Safari, and Chrome
and latest Microsoft Edge v.83

I use the classify plug-in from @julienallard1 to add CSS to the text element. You can find information on how to do that here. 🔥 Classify: A tiny plugin that brings CSS power to Bubble

Then I use this in an HTML element.

<style>

.textClass {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

</style>
3 Likes

Have you all found a workaround without a need of another plugin?

Interesting to see this has been reported for a while now, here and in other threads. True centering should work out of the box. Very odd oversight!

Screen Shot 2020-07-30 at 10.56.25 AM

“Centered vertically” Lol.

2 Likes

I think this (and other things, too) may be coming with.after the BUbble redesign.

1 Like

Hi,

I´ve tried this but it doesn´t work. Can you please explain this, I´m new at css

Thanks in advance :slightly_smiling_face: :computer:

There is another way to ensure the centering inside a text element that I feel is much simpler.

    1. Create the text element
    1. Remove style (can save it later)
    1. Choose whatever font and font size you want
    1. Change line spacing to 1.5

Then change the element height to be the font size + 1/2 the font size - So 16 with 1.5 spacing would be 24 and the text will be perfectly centered in the element

I learned that tidbit from @gregjohnkeegan at buildcamp.io

Hi Mike,

The problem with that solution is that it breaks as soon as you use dynamic data with varying number of characters.

For a group to not expand if a text element inside it is not tall enough (in bubble speak) the text element has to already be the maximum height required for any length of text (to give it room to expand inside it’s own element) or be allowed to “cut off content”

Having the ability to center inside its own element is the functionality needed for that to work. And that piece is what’s currently missing in bubble.

group 1. - Set up as your example, works great with known # of characters.
group 2. - Set up as your example, but with more characters, expanding the element
group 3. - Text element using the same size as the parent group, No longer expanding the element, but text is no longer vertically centred within the group.

Not sure Team Bubble can get to this without it breaking a lot of legacy formatting, but if they can set it up to work this way for just new text elements then I’m also 100% behind this.

We use a lot of buttons disguised as text for this reason, but that doesn’t work out when you have a wide variance of potential outcomes in text length (buttons don’t expand with text) or if you want to use any of the other bells and whistles of text formatting.

If this could be added in one of the monthly hacks that would be helpful - even more so if teamed with proper vertical centering for elements within elements (e.g., a button or text element floating vertically in the center of a group that can change size based on it’s contents).

3 Likes

I agree, this is a big problem with my application. I have having to re-create my designs because it is very difficult to center text verically (like, actually center it).

@Bubble, please fix this!

Your button trick just saved me hours of hair pulling.

This snippet of code worked for :raised_hands: I didn’t use the classify plugin either. I just added id attribute to the textbox I was needing to target.

I’d been needing to center multiple lines of text vertically.

1 Like

Hi,

Was looking for a solution like yours and was wondering if you could share the code?
Would really appreciate your help.

Thanks

Hey @info.norbert.nica :wave:

Does this work for you? The code is on the page level.

Editor: 805testapp42 | Bubble Editor

Preview: Your Bubble app

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials

No, sorry, I have text in a group and its bloody impossible to align it vertically. (the group has no max width).
I never learnt CSS, HTML or anything like that but normally I find solutions online and can figure things out 1+1 =2 i learn quite quickly but this one seems like rocket science for whatever reason. :frowning:

I found some codes that actually put the text in the middle of the actual text box but doesn’t matter if i choose flex or not the text box seems like it doesn’t follow the height of the group just the width thus the text will never be vertically centred

Can you share a screenshot so we can get a better idea of what you are trying to accomplish? :blush: