# Centering Text in template (CSS)

**URL:** <https://discourse.nodered.org/t/centering-text-in-template-css/82958>\
**Category:** General\
**Created:** [17 November 2023 05:11 UTC](https://discourse.nodered.org/t/centering-text-in-template-css/82958 "2023-11-17T05:11:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [17 November 2023 05:11 UTC](https://discourse.nodered.org/t/centering-text-in-template-css/82958/1 "2023-11-17T05:11:01Z")

</div>

How to center a text in a template node ? I am sorry for asking, but the forum search could not help me, since i am totally a noob with css/html

appreciate any help.

```auto
[{"id":"af8205cd532ef336","type":"ui_template","z":"0157f0d82cb3ab09","group":"0702bac6d04677ec","name":"","order":1,"width":"30","height":"18","format":"<div \nstyle=\"font-size: 100px;\" \nng-bind-html=\"msg.payload1\">\n</div>\n<div \nstyle=\"font-size: 50px;\" \nng-bind-html=\"msg.payload2\">\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":820,"y":180,"wires":[[]]},{"id":"7060e7dfe484e5b7","type":"inject","z":"0157f0d82cb3ab09","name":"","props":[{"p":"payload1","v":"Text","vt":"str"},{"p":"payload2","v":"Some other Text","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":650,"y":180,"wires":[["af8205cd532ef336"]]},{"id":"0702bac6d04677ec","type":"ui_group","name":"HEADER","tab":"de1fdd9e196af213","order":1,"disp":false,"width":"32","collapse":false,"className":""},{"id":"de1fdd9e196af213","type":"ui_tab","name":"CLOCK","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [17 November 2023 05:14 UTC](https://discourse.nodered.org/t/centering-text-in-template-css/82958/2 "2023-11-17T05:14:05Z")

</div>

I got it

```auto
[{"id":"af8205cd532ef336","type":"ui_template","z":"0157f0d82cb3ab09","group":"0702bac6d04677ec","name":"","order":1,"width":"30","height":"18","format":"<div \nstyle=\"font-size: 100px;\" \nng-bind-html=\"msg.payload1\">\n</div>\n<div \nstyle=\"font-size: 50px;\" \nng-bind-html=\"msg.payload2\">\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"centered-text","x":820,"y":180,"wires":[[]]},{"id":"7060e7dfe484e5b7","type":"inject","z":"0157f0d82cb3ab09","name":"","props":[{"p":"payload1","v":"Text","vt":"str"},{"p":"payload2","v":"Some other Text","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":650,"y":180,"wires":[["af8205cd532ef336"]]},{"id":"7b3341054b0cbd52","type":"ui_template","z":"0157f0d82cb3ab09","group":"0702bac6d04677ec","name":"","order":1,"width":"30","height":"18","format":"<style>\n.centered-text {\ntext-align: center;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":820,"y":240,"wires":[[]]},{"id":"0702bac6d04677ec","type":"ui_group","name":"HEADER","tab":"de1fdd9e196af213","order":1,"disp":false,"width":"32","collapse":false,"className":""},{"id":"de1fdd9e196af213","type":"ui_tab","name":"CLOCK","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

but would still appreciate if someone gives me simpler solution. how to add class in the same template ?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [17 November 2023 07:25 UTC](https://discourse.nodered.org/t/centering-text-in-template-css/82958/3 "2023-11-17T07:25:38Z")

</div>

Here is three examples of adding class or styling in the same template node

```auto
[{"id":"92fdcd9a818448db","type":"ui_template","z":"d1395164b4eec73e","group":"0702bac6d04677ec","name":"","order":1,"width":"30","height":"18","format":"<div \nstyle=\"font-size: 100px; text-align: center;\" \nng-bind-html=\"msg.payload1\">\n</div>\n<div \nstyle=\"font-size: 50px; text-align: center;\" \nng-bind-html=\"msg.payload2\">\n</div>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":540,"y":1880,"wires":[[]]},{"id":"a2571c172893af2b","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload1","v":"Text","vt":"str"},{"p":"payload2","v":"Some other Text","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":370,"y":1880,"wires":[["92fdcd9a818448db"]]},{"id":"068dc7604bd8d2e2","type":"ui_template","z":"d1395164b4eec73e","group":"0702bac6d04677ec","name":"","order":1,"width":"30","height":"18","format":"<style>\n.centered-text {\n text-align: center;\n}\n</style>\n\n<div \nstyle=\"font-size: 100px;\" \nng-bind-html=\"msg.payload1\">\n</div>\n<div \nstyle=\"font-size: 50px;\" \nng-bind-html=\"msg.payload2\">\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"centered-text","x":600,"y":1980,"wires":[[]]},{"id":"7ca62f1bbecc27d1","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload1","v":"Text","vt":"str"},{"p":"payload2","v":"Some other Text","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":430,"y":1980,"wires":[["068dc7604bd8d2e2"]]},{"id":"4b8a561eb00b6687","type":"ui_template","z":"d1395164b4eec73e","group":"0702bac6d04677ec","name":"","order":1,"width":"30","height":"18","format":"<style>\n.centered-text1 {\n text-align: center;\n font-size: 100px;\n}\n.centered-text2 {\n text-align: center;\n font-size: 50px;\n}\n</style>\n\n<div \nclass=\"centered-text1\"\nng-bind-html=\"msg.payload1\">\n</div>\n<div \nclass=\"centered-text2\"\nng-bind-html=\"msg.payload2\">\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":2060,"wires":[[]]},{"id":"f4223e06823add95","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload1","v":"Text","vt":"str"},{"p":"payload2","v":"Some other Text","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":450,"y":2060,"wires":[["4b8a561eb00b6687"]]},{"id":"0702bac6d04677ec","type":"ui_group","name":"HEADER2","tab":"de1fdd9e196af213","order":1,"disp":false,"width":"32","collapse":false,"className":""},{"id":"de1fdd9e196af213","type":"ui_tab","name":"CLOCK","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [17 November 2023 08:07 UTC](https://discourse.nodered.org/t/centering-text-in-template-css/82958/4 "2023-11-17T08:07:12Z")

</div>

Great. Thanks a lot

---

<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:** [1 December 2023 08:07 UTC](https://discourse.nodered.org/t/centering-text-in-template-css/82958/5 "2023-12-01T08:07:16Z")

</div>

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