Center text vertically

Is there a particular reason why we can’t have a true center text vertically as an option?

I find myself using flexbox for text elements, but it seems like such a simple thing to have as default in the editor? But maybe it really messes with something if it were an option?

Anyway, to the powers that be, it sure would make things a lot simpler :slight_smile:

2 Likes

Yes, I agree, it would be nice if elements could be locked to the center of the page.

I might be misunderstanding your request, but are you aware of the following?

1 Like

I think he is saying to have text be vertical instead or horizontal.

L
I
K
E

T
H
I
S

and then to be able to center that in a group of some kind.

I’ve don’t this with some elements, and it is a pain to figure out the right sizing to get the text to be vertical

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.

9 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

1 Like

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).

5 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