# Center in a container 2

**URL:** <https://forums.realmacsoftware.com/t/center-in-a-container-2/44375>\
**Category:** Elements\
**Created:** [August 22, 2024, 10:23am UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375 "2024-08-22T10:23:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [August 22, 2024, 10:23am UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/1 "2024-08-22T10:23:01Z")

</div>

Further to this thread: [Center in a container](https://forums.realmacsoftware.com/t/center-in-a-container/43910)

I am trying to centre this button (and failing):

![CleanShot 2024-08-22 at 11.16.50](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/3/e3acba85e1dd3d10c8960f1531a7fe2746332ce6.gif)

I am trying to work out whether: I am doing something wrong, a feature that is still in progress or a bug?

---

<div class="post-metadata">

**Author:** ![Bruno](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruno/32/25457_2.png) [@Bruno](https://forums.realmacsoftware.com/u/Bruno)\
**Post date:** [August 22, 2024, 2:21pm UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/2 "2024-08-22T14:21:26Z")

</div>

@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? 🧐

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [August 22, 2024, 2:45pm UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/3 "2024-08-22T14:45:44Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [August 22, 2024, 2:45pm UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/4 "2024-08-22T14:45:59Z")

</div>

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](https://files.bryanrieger.com/center-object.zip)

@Bruno the irony that this is all still far easier in code isn’t lost on me.

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [August 22, 2024, 2:57pm UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/5 "2024-08-22T14:57:34Z")

</div>

Hi @anon68150607,  
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.

---

<div class="post-metadata">

**Author:** ![Bruno](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruno/32/25457_2.png) [@Bruno](https://forums.realmacsoftware.com/u/Bruno)\
**Post date:** [August 22, 2024, 3:01pm UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/6 "2024-08-22T15:01:12Z")

</div>

@anon68150607 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 🤪

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [August 22, 2024, 3:06pm UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/7 "2024-08-22T15:06:07Z")

</div>

> [@logrunner](#):
>
> …your example which is showing the image vertically aligned but the horizontal alignment is edge to edge

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.

 ![CleanShot 2024-08-22 at 11.02.35@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/b/3bbee902f96dc4ad76cb29a017825500debf6318.jpeg)

 ![CleanShot 2024-08-22 at 11.05.47@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/c/1ccfc6c81d84d69bd52d0f4d480a9be282ea42c9.jpeg)

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [August 22, 2024, 3:15pm UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/8 "2024-08-22T15:15:36Z")

</div>

> [@anon68150607](#):
>
> Huh, that’s not what I’m seeing at all

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.

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [August 22, 2024, 3:26pm UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/9 "2024-08-22T15:26:00Z")

</div>

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.

 ![CleanShot 2024-08-22 at 11.20.02@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/5/75438c0c0f426fc0afa5f944921b43a5e37557dd.png)

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [August 22, 2024, 3:32pm UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/10 "2024-08-22T15:32:38Z")

</div>

> [@anon68150607](#):
>
> Found the culprit.

That’s a good bit of detective work. 👍

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 23, 2024, 2:39pm UTC](https://forums.realmacsoftware.com/t/center-in-a-container-2/44375/11 "2024-08-23T14:39:06Z")

</div>

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!
