Centering Text in template (CSS)

General
1

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.

[{"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}]
2

I got it

[{"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 ?

3

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

[{"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}]
1 Like
4

Great. Thanks a lot

5

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