# Centering a 'template node' in Dashboard Group

**URL:** <https://discourse.nodered.org/t/centering-a-template-node-in-dashboard-group/4840>\
**Category:** Dashboard\
**Created:** [13 November 2018 15:09 UTC](https://discourse.nodered.org/t/centering-a-template-node-in-dashboard-group/4840 "2018-11-13T15:09:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sweetwater](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@sweetwater](https://discourse.nodered.org/u/sweetwater)\
**Post date:** [13 November 2018 15:09 UTC](https://discourse.nodered.org/t/centering-a-template-node-in-dashboard-group/4840/1 "2018-11-13T15:09:03Z")

</div>

A bit of help needed.  
We have a Dashboard . We have a Group A with width = 15.  
Placed a \<\> Template node and all works.  
However, how do we get the \<\> Template Node to be 'CENTERED' within the Dashboard Group A ?

It seems the \<\>template is left justified.

Thank you for any guidance.

---

<div class="post-metadata">

**Author:** ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)\
**Post date:** [13 November 2018 15:53 UTC](https://discourse.nodered.org/t/centering-a-template-node-in-dashboard-group/4840/2 "2018-11-13T15:53:00Z")

</div>

Did you try to wrap it with a parent like this?

```auto
<div style="text-align: center;">
    Your template here
</div>

```

---

<div class="post-metadata">

**Author:** ![sweetwater](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@sweetwater](https://discourse.nodered.org/u/sweetwater)\
**Post date:** [13 November 2018 16:26 UTC](https://discourse.nodered.org/t/centering-a-template-node-in-dashboard-group/4840/3 "2018-11-13T16:26:05Z")

</div>

The dashboard group that is holding this element is 15 wide  
the image is showing but it is LEFT justified. Trying to Center this image element in this dashboard group.  
Tried a few things including the following but not successful.

```
<img ng-src={{msg.payload}} height="auto" width="100%" />

```

---

<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:** [13 November 2018 16:56 UTC](https://discourse.nodered.org/t/centering-a-template-node-in-dashboard-group/4840/4 "2018-11-13T16:56:22Z")

</div>

Widgets are packed into the group left to right so yes it is left justified within the group. If you make your template either width 15 - or auto (which should do the same) then inside your template you can justify as you wish.

---

<div class="post-metadata">

**Author:** ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)\
**Post date:** [13 November 2018 17:07 UTC](https://discourse.nodered.org/t/centering-a-template-node-in-dashboard-group/4840/5 "2018-11-13T17:07:33Z")

</div>

Yup, as already mentioned, just wrap it around and you are good to go.

```auto
[{"id":"4ea938f1.c58308","type":"ui_template","z":"3a57f289.02bc66","group":"53ad7933.7f9b98","name":"","order":0,"width":0,"height":0,"format":"<div style=\"text-align: center\">\n <img src=\"https://www.automatiserar.se/wp-content/uploads/2017/10/Node-RED.jpg\">\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":420,"y":700,"wires":[[]]},{"id":"53ad7933.7f9b98","type":"ui_group","z":"","name":"width15","tab":"fa232f71.167e7","disp":true,"width":"15","collapse":false},{"id":"fa232f71.167e7","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":3}]

```

I get vertical scroll in this example but it seems to be standard Dashboard issue unfortunately.

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

---

<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:** [13 November 2018 17:38 UTC](https://discourse.nodered.org/t/centering-a-template-node-in-dashboard-group/4840/6 "2018-11-13T17:38:06Z")

</div>

That may be slightly better in latest master version. (not yet on npm)

---

<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:08 UTC](https://discourse.nodered.org/t/centering-a-template-node-in-dashboard-group/4840/7 "2020-01-09T04:08:02Z")

</div>

Having the same kinds of problems with ui\_form.

Want to center the titles, but I cant get the ui\_template to correct it. I also seem to get a broken form too with sliders. I cant resize to correct it.

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