# Easy way to Center a Button in a Group

**URL:** <https://discourse.nodered.org/t/easy-way-to-center-a-button-in-a-group/51577>\
**Category:** Dashboard\
**Created:** [27 September 2021 16:33 UTC](https://discourse.nodered.org/t/easy-way-to-center-a-button-in-a-group/51577 "2021-09-27T16:33:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [27 September 2021 16:33 UTC](https://discourse.nodered.org/t/easy-way-to-center-a-button-in-a-group/51577/1 "2021-09-27T16:33:03Z")

</div>

I have a Group Width of 8 and a Button width of 6. The Button is Left Justified in the Group.  
Is there an easy way to Center the Button within the Group? I thought there was an alignment property somewhere??

Thanks...

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [27 September 2021 16:50 UTC](https://discourse.nodered.org/t/easy-way-to-center-a-button-in-a-group/51577/2 "2021-09-27T16:50:04Z")

</div>

There is a "Layout" button for each Dashboard tab in the editor right hand column.  
You can drag the button into the right position.

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [27 September 2021 17:19 UTC](https://discourse.nodered.org/t/easy-way-to-center-a-button-in-a-group/51577/3 "2021-09-27T17:19:41Z")

</div>

I found that button by accident.

I did notice some flakiness with the editor and the spacers.

The editor seems to add spacers and if I delete them the alignment gets changes back to left.

Also, I remember I used to be able to add a

* * *
 to create a line between sections and now I can't seem to get that to work.

I used the template, but all I get is a dot and not a line?

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [27 September 2021 20:24 UTC](https://discourse.nodered.org/t/easy-way-to-center-a-button-in-a-group/51577/4 "2021-09-27T20:24:17Z")

</div>

> [@tcontrada](#):
>
> The editor seems to add spacers and if I delete them the alignment gets changes back to left.

Yes 😉

The Layout Editor is not too bad, once you get the hang of it... no way to add lines though. Perhaps via the art of CSS?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bc507fcff334c0b9125cfd4a798747b6ffb6c748.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/b/fba101afd139435fb49abe4b216638d038776ac5.png)

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [27 September 2021 21:04 UTC](https://discourse.nodered.org/t/easy-way-to-center-a-button-in-a-group/51577/5 "2021-09-27T21:04:42Z")

</div>

Actually, I added a Template Node with the following to create a Horizontal Line.

* * *

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [27 September 2021 21:19 UTC](https://discourse.nodered.org/t/easy-way-to-center-a-button-in-a-group/51577/6 "2021-09-27T21:19:19Z")

</div>

Put the `<hr>` inside div element

```auto
<div><hr></div>

```

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [27 September 2021 23:43 UTC](https://discourse.nodered.org/t/easy-way-to-center-a-button-in-a-group/51577/7 "2021-09-27T23:43:45Z")

</div>

Ok, easier... Thanks!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 October 2021 23:43 UTC](https://discourse.nodered.org/t/easy-way-to-center-a-button-in-a-group/51577/8 "2021-10-27T23:43:49Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.