[New Plugin] Vertical Center Align

Showcase
1

Vertically center any element within a group, dynamically! End this vertical headache once and for all!

Extremely simple and functional use!

Instructions:

  1. Drop the Vertical Center plugin element on the page.

  2. Give it the ID (do not forget to expose the ID elements on Settings/General). You can use the same ID for more than one or all elements, if you want.

  3. Give the ID to the group and/or the element you want to be vertically centered.

That’s it!

PLUGIN: Vertical Center Align Plugin | Bubble

DEMO: https://99plugins.bubbleapps.io/vertically_centered

EDITOR: https://bubble.io/page?type=page&name=vertically_centered&id=99plugins&tab=tabs-1

8 Likes
2

Awesome! Thanks for sharing

1 Like
3

Thanks Reece!

1 Like
4

Nice work with the integrated plugin, saves playing about with custom CSS :+1:

1 Like
5

Thanks Luke. Yes, most people don’t have the time or don’t want to learn CSS to implement it themselves.

1 Like
6

This is the best. I will literally use it as soon as I can get to my computer.

1 Like
7

That’s cool! Thank you for the support!

8

Great! But what about align bottom?:slight_smile:

1 Like
9

As I always saw people complaining about the lack of dynamic vertical alignment, and I never aligned anything below myself, I never thought about it! But I can add! Let’s solve the problems! hehe

10

it would be great!

11

The vertical centering works, but enabling it seems to prevent/disable horizontal centering. Am I missing something? My text boxes need both.

12

Hi Mike!

You are right. I pushed a update that enables now vertically center Things (groups, images, shapes, etc) and 2 new elements for Vertical Center Text and Vertical Right Text.

If you want text at left, use Vertical Things normally.

:rotating_light::rotating_light: PLEASE UPDATE YOUR ELEMENTS ID’S IF YOU LET IT DEFAULT. :rotating_light::rotating_light:

Let me know if you have any issues.

2 Likes
13

Will this work for collapse width or when you hide an element next to each other, the second element takes the first ones position?

14

No. Element width in Bubble is hard, due to it fixed width div system, but it is what makes Bubble so easy to place things at screen and see exactly it at preview/live versions.

1 Like
15

Hello,
I have tried using your plugin to centre an image inside a group but it seems it centres it according to a higher parent and not the immediate parent group which creates a problem.
How can I centre according to the direct parent?
Thanks

16

Hi! Can you please send me an example to your app to demonstrate it? I tried here and it works ok.

17

Is there a way to deactivate the plugin with workflows? I would like to keep the intro group (page) as always vertically centered on various screen sizes (aligned to the page height) but really need other groups (pages) to behave normally. I’ve tried various hacks, my most hopeful one was simply only having it “active” in certain situations through a workflow but can’t get it work. I’m guessing it’s a Bubble issue? Can you think of any way I can do this? Otherwise, fantastic job, thanks!