Streaming live at 10am (PST)

Center element in the new style panel?

Where is center element in the new style panel?

2 Likes
2 Likes

Yes!!! I need to know this too!

1 Like

Seem to be a well kept secret of our Webflow specialists! :slight_smile:
For me, the way to go is, using a flex container instead of a block container and align the elements within by using the container’s „Justify“ settings.
But, perhaps a Webflow crack knows a better solution …

no need to use flex, just set both the left and right margins of the item to ‘auto’. —>Centering Div in Style Panel Beta

Thank you for answering. Call me an idiot, but I can’t get it to work.
Here my steps in detail:

  • I paced a section.
  • I placed a container into this section.
  • I placed an image element into the container. –> It is left aligned.
  • I selected the image container and set left and right margin to Auto.
  • Nothing happens. The image container sticks to the left.
    What am I doing wrong?

Inline blocks cannot be centered in this way. You should put your image into the div with some width first. Then add auto-auto to this div with the image inside.

Thanks for the answer. Nevertheless, I don’t understand, what you are saying.
If I do the very same using the old Style Panel, it works at once:

  • I place a section .
  • I place a container into this section.
  • I place an image element into the container. –> It is left aligned.
  • I selected the image container and click onto the „Center“ icon (>•<), all works fine.

But perhaps this is something, only a coder understands. :slight_smile:

You are 100% correct. This needs to be addressed. Please and Thank You

So the image you just placed into the container is not a block level element. Images are inline elements. That’s why it is on the left. Applying width, display-block, margin-left auto, margin-right auto will center an element in it’s parent container.

3 Likes

Hi @mac_heibu and @JayPay, thanks for your comments on the new style panel and the auto margin settings.

The old style panel actually did two things when clicking the Auto button, it set the left and right margins to auto AND set the Display to Block.

To center the image in the container using the new style panel, apply left and right margin set to auto and set the Display to block.

See my video:

I hope this helps

Thank you all for the explanations! Seems to be clear now!

Center elemenet button - was the most frequently used feature! It feels like the developers are doing their utmost to destroy the perfect project.
It is sad.

Thanks for the video cyberday, much appreciated. But do you not think it would be better to retain the existing functionality which only required one click instead of a less intuitive method that requires 3 clicks? Seems like a step backwards.

1 Like

The forum topic for this subject (center button) is below. Head over and join it. Help keep fragmentation down.

Design style Interface has been updated. The center button is back. New location.

CloudApp

3 Likes

Wow… Just wanna congratulate everyone who joined in voicing the need for the centre button.

It’s back!

Good job.

1 Like