# Centering group names

**URL:** <https://discourse.nodered.org/t/centering-group-names/9189>\
**Category:** Dashboard\
**Created:** [19 March 2019 15:16 UTC](https://discourse.nodered.org/t/centering-group-names/9189 "2019-03-19T15:16:58Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brugsezot](https://avatars.discourse-cdn.com/v4/letter/b/c5a1d2/32.png) [@Brugsezot](https://discourse.nodered.org/u/Brugsezot)\
**Post date:** [19 March 2019 15:16 UTC](https://discourse.nodered.org/t/centering-group-names/9189/1 "2019-03-19T15:16:58Z")

</div>

Hello,

I have been trying to center a group name above some icons, but whatever i try and searched the forums, no luck. Example:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d8220ff4a3b0b4f8ff13cd3a3a9acd041204669e.png)

Would this need a different approach? Thinking about adding a row above the icons and enter text and center that.

Thanks,

Ed.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [19 March 2019 15:21 UTC](https://discourse.nodered.org/t/centering-group-names/9189/2 "2019-03-19T15:21:17Z")

</div>

Are you trying to center PIR? Can you provide your dashboard nodes?

---

<div class="post-metadata">

**Author:** ![Brugsezot](https://avatars.discourse-cdn.com/v4/letter/b/c5a1d2/32.png) [@Brugsezot](https://discourse.nodered.org/u/Brugsezot)\
**Post date:** [19 March 2019 15:23 UTC](https://discourse.nodered.org/t/centering-group-names/9189/3 "2019-03-19T15:23:33Z")

</div>

Yes, it's PIR that needs to be centered. I'll try a workaround and if that fails i'll provide my nodes.

Ed.

---

<div class="post-metadata">

**Author:** ![Brugsezot](https://avatars.discourse-cdn.com/v4/letter/b/c5a1d2/32.png) [@Brugsezot](https://discourse.nodered.org/u/Brugsezot)\
**Post date:** [19 March 2019 15:36 UTC](https://discourse.nodered.org/t/centering-group-names/9189/4 "2019-03-19T15:36:13Z")

</div>

When i add a row above the icons, it seems to solve what i want. But then it seems to push down the icons and the frame hight shows a difference.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/805713c59faac18d8f9eba8bc7373a68f58030ec.png)

I'll tinker a bit more with this.

Ed.

---

<div class="post-metadata">

**Author:** ![Brugsezot](https://avatars.discourse-cdn.com/v4/letter/b/c5a1d2/32.png) [@Brugsezot](https://discourse.nodered.org/u/Brugsezot)\
**Post date:** [19 March 2019 15:44 UTC](https://discourse.nodered.org/t/centering-group-names/9189/5 "2019-03-19T15:44:27Z")

</div>

All right,

Adding a row above the left group fixes this, but that's not really what i wanted. The name "Locatie" is unneeded in my opinion. I could color it in the same color as the background, but that would be an awkward solution.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/50059cbc0ee37852bef3807b369d96cf85077d64.png)

Allmost there though...

Ed.

---

<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:** [19 March 2019 15:45 UTC](https://discourse.nodered.org/t/centering-group-names/9189/6 "2019-03-19T15:45:36Z")

</div>

Then you'll need to do it for every group. Add empty text row where header is not needed.

---

<div class="post-metadata">

**Author:** ![Brugsezot](https://avatars.discourse-cdn.com/v4/letter/b/c5a1d2/32.png) [@Brugsezot](https://discourse.nodered.org/u/Brugsezot)\
**Post date:** [19 March 2019 15:48 UTC](https://discourse.nodered.org/t/centering-group-names/9189/7 "2019-03-19T15:48:02Z")

</div>

But then you'll get the situation showed with picture two. The word "Location" is unwanted but when i leave it empty the groups are no longer aligned.

Ed.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 March 2019 15:51 UTC](https://discourse.nodered.org/t/centering-group-names/9189/8 "2019-03-19T15:51:55Z")

</div>

How about a space " " - so sort of empty....  
Or if you don't mind all headings being centred... add a ui\_template to the page with some CSS like

```auto
<style>
.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
    text-align: center;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![Brugsezot](https://avatars.discourse-cdn.com/v4/letter/b/c5a1d2/32.png) [@Brugsezot](https://discourse.nodered.org/u/Brugsezot)\
**Post date:** [19 March 2019 15:54 UTC](https://discourse.nodered.org/t/centering-group-names/9189/9 "2019-03-19T15:54:03Z")

</div>

Yep, the single space did the trick. Why didn't i think of that?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/ef51c14f34906f51223858a5d376117bfc286358.png)

Thank you!

Ed.

---

<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:** [19 March 2019 15:57 UTC](https://discourse.nodered.org/t/centering-group-names/9189/10 "2019-03-19T15:57:30Z")

</div>

Be advised that now you have all card titles centered 😉

---

<div class="post-metadata">

**Author:** ![Brugsezot](https://avatars.discourse-cdn.com/v4/letter/b/c5a1d2/32.png) [@Brugsezot](https://discourse.nodered.org/u/Brugsezot)\
**Post date:** [19 March 2019 16:11 UTC](https://discourse.nodered.org/t/centering-group-names/9189/11 "2019-03-19T16:11:19Z")

</div>

You mean horizontally for additional groups? Planning to add group for door switches.

Vertically they are aligned to the left.

Ed.

---

<div class="post-metadata">

**Author:** ![vlturner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vlturner/32/15211_2.png) [@vlturner](https://discourse.nodered.org/u/vlturner)\
**Post date:** [9 January 2020 04:00 UTC](https://discourse.nodered.org/t/centering-group-names/9189/12 "2020-01-09T04:00:48Z")

</div>

Can you give an example as to how you do that? I tried but got zip....

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [9 January 2020 05:13 UTC](https://discourse.nodered.org/t/centering-group-names/9189/13 "2020-01-09T05:13:38Z")

</div>

Perhaps take a look on this node

> **[node-red-node-ui-list](https://flows.nodered.org/node/node-red-node-ui-list)**
>
> Node-RED Dashboard UI widget node for simple list

I use this very often for similar purposes