Further to this thread: Center in a container
I am trying to centre this button (and failing):
I am trying to work out whether: I am doing something wrong, a feature that is still in progress or a bug?
@logrunner Hi,
Container+flex item+button, center at the flex item level. Still don’t understand why it is so difficult to align something in a container… with code it’s obviously easy… but aren’t we here for the no-code? 
I think my point is that the Container component’s, Content alignment is set to centre for horizontal and vertical. You can’t easily tell from the GIF above, but it is doing the vertical alignment correctly but not the horizontal, which leads me to believe it is a bug?
Yeah, it feels way more difficult than it should (navigating and working with the element properties is a big part of the problem), but you can do it with just a container and the element you want to centre.
With the Container selected set the Content - > Horizontal and Content → Vertical to centre, and make sure there is a height set to the container (ie. screen). Then with the element you want centred selected, set the Margins to ‘Auto’. Then marvel at your perfectly centred element. 
Here’s an example file.
https://files.bryanrieger.com/center-object.zip
@Bruno the irony that this is all still far easier in code isn’t lost on me.
1 Like
Hi @bryanrieger,
Thanks for your example which is showing the image vertically aligned but the horizontal alignment is edge to edge (so not really demonstrating horizontal centre alignment). My example, which has custom container and button widths, shows the button not being centre aligned even when I am requesting it to be so.
@bryanrieger Hi,
teasing rather, the irony will come when we get to talking about optimizing our html codes for custom components in software initially designed for non-coders 
1 Like
Huh, that’s not what I’m seeing at all. That said, when I replace the Image with a Button element it is as you described. Not sure what’s going on there. I even tried to fix it by adding a cheeky button { margin: auto; } style to the page to no avail.
OK, yes I had to expand it up to larger than desktop to see the effect.
Interesting that the button isn’t working for you either.
Found the culprit. There’s a .w-full class being applied to the Button <div> that is forcing the div (which is set to flex) to 100%. Removing the .w-full class causes the Button to display as expected.
At first I thought this was limited to the Editor, but the issue is also present in the published site. Interestingly, the Button element is rendered using a <div> tag and not as either the <a> or <button> specified in the component.
1 Like
That’s a good bit of detective work. 
1 Like
Thanks for the feedback here
I think the solution might be to add alignment controls to the button. We’ll investigate this further though, and hopefully have an update in the next beta!
3 Likes