# Center image in viewer window?

**URL:** <https://discourse.nodered.org/t/center-image-in-viewer-window/79277>\
**Category:** Dashboard\
**Created:** [17 June 2023 19:19 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277 "2023-06-17T19:19:00Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![wb666greene](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wb666greene/32/6534_2.png) [@wb666greene](https://discourse.nodered.org/u/wb666greene)\
**Post date:** [17 June 2023 19:19 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/1 "2023-06-17T19:19:00Z")

</div>

I've been using the Dashboard with a template and viewer node to display the person detection from my AI system. It works great 720p, 1920p, 4K etc images are all automatically resized to fill the viewport and with my few 4:3 cameras the distortion resizing to 16:9 is not too bad.

Recently I've changed the system to "zoom in" on the detection and send a cropped image, since these are usually square or "portrait" aspect ratios the distortion is not really acceptable.

My original template node contains the single line:  
\<img width="768px" height="360px" src="data:image/jpg;base64,{{{payload}}}

Changing it to remove the width= part:  
\<img height="360px" src="data:image/jpg;base64,{{{payload}}}

Give a good solution in that the height is resized and the width reduce in proportion so there is not distortion. The issue is the image is displayed "left justified" in the viewport. I can live with it, but it'd look a lot better if it were centered in the viewport.

A "center" attribute seemed to be accepted but didn't seem to do anything:  
\<img height="360px" center src="data:image/jpg;base64,{{{payload}}}

Is there a simple way to get the image centered in the viewport?

---

<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 June 2023 22:44 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/2 "2023-06-17T22:44:28Z")

</div>

Using CSS internal or inline styling should work

```auto
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 360px;
height: 360px;
}
</style>
<img class="center" src="data:image/jpg;base64,{{{payload}}}"/>

or

<img style="display: block;
        margin-left: auto;
        margin-right: auto;
        width: 360px;
        height: 360px;" src="data:image/jpg;base64,{{{payload}}}"/>

```

---

<div class="post-metadata">

**Author:** ![wb666greene](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wb666greene/32/6534_2.png) [@wb666greene](https://discourse.nodered.org/u/wb666greene)\
**Post date:** [18 June 2023 00:04 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/3 "2023-06-18T00:04:47Z")

</div>

> [@E1cid](#):
>
> ```auto
> <img style="display: block;
> margin-left: auto;
> margin-right: auto;
> width: 360px;
> height: 360px;" src="data:image/jpg;base64,{{{payload}}}"/>
> 
> ```

Thanks but the inline method didn't work, it gave me the full image in the view-port with scrollbars, it was not resized at all. I've no clue how to try CSS method.

I've since discovered that being left justified has advantages when viewing the Dashboard on a cell phone. It is not the way I usually use it, but might be an accaptable trade-off.

---

<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:** [18 June 2023 08:41 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/4 "2023-06-18T08:41:45Z")

</div>

Strange as if i resize an image i get no scroll bar  
e.g

 ![chrome_screenshot_1687077540751](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/9/d976a0a23eac3023f4e3b3a3c7a0da0d0e6f0ba9.jpeg)  
What is the viewer node?

---

<div class="post-metadata">

**Author:** ![wb666greene](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wb666greene/32/6534_2.png) [@wb666greene](https://discourse.nodered.org/u/wb666greene)\
**Post date:** [18 June 2023 13:55 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/5 "2023-06-18T13:55:06Z")

</div>

Here are my template and viewer nodes:

```auto
[
    {
        "id": "e3a5e598.f37888",
        "type": "template",
        "z": "adf6d32e.a7a8c",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<img height=\"360px\" src=\"data:image/jpg;base64,{{{payload}}}\">",
        "output": "str",
        "x": 870,
        "y": 935,
        "wires": [
            [
                "6dfa5a6e.142884"
            ]
        ]
    },
    {
        "id": "6dfa5a6e.142884",
        "type": "ui_template",
        "z": "adf6d32e.a7a8c",
        "group": "893450d8.62944",
        "name": "Viewer",
        "order": 1,
        "width": "13",
        "height": "7",
        "format": "<div ng-bind-html=\"msg.payload\"></div>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 1005,
        "y": 935,
        "wires": [
            []
        ]
    },
    {
        "id": "893450d8.62944",
        "type": "ui_group",
        "z": "",
        "name": "Camera Viewer",
        "tab": "1b8c760d.46028a",
        "order": 2,
        "disp": true,
        "width": "13",
        "collapse": false
    },
    {
        "id": "1b8c760d.46028a",
        "type": "ui_tab",
        "z": "",
        "name": "AI Controller",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

There may be version issues, these are "IOT" systems without the latest versions. In this particular case node-red-dashboard 2.22.1 node-red 1.0.6

---

<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:** [18 June 2023 14:49 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/6 "2023-06-18T14:49:43Z")

</div>

Your example is corrupt as you did not follow forum guidelines for posting code, use \</\> button and paste between triple backticks. You should know this by now, you are not a newbie in the forum.

Your issue is you are placing the image in a div block.  
here are two ways to display without the div

```auto
[{"id":"d1f3ceb3299cb7f9","type":"inject","z":"b9860b4b9de8c8da","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=","payloadType":"str","x":90,"y":4560,"wires":[["6cd425d6633ec68e","0147d7fbe533970f"]]},{"id":"6cd425d6633ec68e","type":"template","z":"b9860b4b9de8c8da","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"msg.template\n<img style=\"display: block;\n margin-left: auto;\n margin-right: auto;\n width:100px;\n height:100px;\" src=\"data:image/png;base64,{{{payload}}}\" />\n","output":"str","x":200,"y":4340,"wires":[["6dcad1c6c461fda3"]]},{"id":"0147d7fbe533970f","type":"ui_template","z":"b9860b4b9de8c8da","group":"2d4fe667.28f8ba","name":"direct in ui-template","order":26,"width":0,"height":0,"format":"Direct in ui-template\n<img style=\"display: block;\n margin-left: auto;\n margin-right: auto;\n width:150px;\n height:150px;\" src=\"data:image/png;base64,{{msg.payload}}\" />","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":330,"y":4480,"wires":[[]]},{"id":"6dcad1c6c461fda3","type":"ui_template","z":"b9860b4b9de8c8da","group":"2d4fe667.28f8ba","name":"msg.template","order":25,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":380,"y":4380,"wires":[[]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false,"className":""},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

I have use png example base64 image as jpg was to large for the forum.

---

<div class="post-metadata">

**Author:** ![wb666greene](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wb666greene/32/6534_2.png) [@wb666greene](https://discourse.nodered.org/u/wb666greene)\
**Post date:** [18 June 2023 20:07 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/7 "2023-06-18T20:07:19Z")

</div>

Thanks but I can't make it work. Your direct method just displayed the image in what looked like a 100x100 pixel box. All I changed was png to jpg in the string. My images are not of fixed size. What I have now is working like I want except it is left justified instead of centered in the viewer.

---

<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:** [18 June 2023 20:11 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/8 "2023-06-18T20:11:03Z")

</div>

did my flow work with no changes?

If you changed the input payload string to a jpg base64 string, then you would also need to change the data uri in the template and ui-template nodes from  
`data:image/png;base64,`  
to  
`data:image/jpg;base64,`

> [@E1cid](#):
>
> ![chrome_screenshot_1687077540751](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/9/d976a0a23eac3023f4e3b3a3c7a0da0d0e6f0ba9.jpeg)

The images are jpg base64 string sent direct to ui-template node.

---

<div class="post-metadata">

**Author:** ![wb666greene](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wb666greene/32/6534_2.png) [@wb666greene](https://discourse.nodered.org/u/wb666greene)\
**Post date:** [18 June 2023 20:34 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/9 "2023-06-18T20:34:33Z")

</div>

That is exactly what I changed in the template node.

Only your direct UI example worked un-modified to show the emoji image.

Here is a screenshot of my UI page:

 ![Screenshot at 2023-06-18 15-24-34](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/4/a4027dd065229c5a5d81472c5c43a670ab88c636.jpeg)

The person on the bike is a crop from the upper right hand corner of the frame and is 441x651 pixels. People closer to the this camera often end up something like 1200x 1600.

It works exactly as I want, except it I think it would look better if the image was centered in the view. But as I said, when I viewed it on my cellphone I can see advantage to the left justification.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [19 June 2023 16:49 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/10 "2023-06-19T16:49:18Z")

</div>

I put this in my "template node" if it can help? try you never know ...

```auto
<style>
  div.image {
    margin-left: auto;
    margin-right: auto;
    height: 100%
  }
</style>

<div class="image">
  <img src="data:image/jpg;base64,{{{msg.payload}}}" alt="wait..." style="height:100%">
</div>

```

---

<div class="post-metadata">

**Author:** ![wb666greene](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wb666greene/32/6534_2.png) [@wb666greene](https://discourse.nodered.org/u/wb666greene)\
**Post date:** [20 June 2023 14:12 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/11 "2023-06-20T14:12:02Z")

</div>

Thanks, but it didn't work. Did I do something incorrectly?

```auto
[
    {
        "id": "e16b700c.0e8",
        "type": "template",
        "z": "7fdf004e.28b08",
        "name": "",
        "field": "template",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<style>\n div.image {\n margin-left: auto;\n margin-right: auto;\n height: 100%\n }\n</style>",
        "output": "str",
        "x": 610,
        "y": 480,
        "wires": [
            [
                "9b5cfa3f.4a4ad8"
            ]
        ]
    },
    {
        "id": "9b5cfa3f.4a4ad8",
        "type": "ui_template",
        "z": "7fdf004e.28b08",
        "group": "ce7f592b.fc44c8",
        "name": "viewer",
        "order": 2,
        "width": "13",
        "height": "7",
        "format": "<div class=\"image\">\n <img src=\"data:image/jpg;base64,{{{msg.payload}}}\" alt=\"wait...\" style=\"height:100%\">\n</div>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 775,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "ce7f592b.fc44c8",
        "type": "ui_group",
        "z": "",
        "name": "Camera Viewer",
        "tab": "cbe60e1a.85145",
        "order": 2,
        "disp": true,
        "width": "13",
        "collapse": false
    },
    {
        "id": "cbe60e1a.85145",
        "type": "ui_tab",
        "z": "",
        "name": "AI Controller",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [27 June 2023 19:05 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/12 "2023-06-27T19:05:51Z")

</div>

try this :

```auto
[
    {
        "id": "40dcc31eb1e028e9",
        "type": "ui_template",
        "z": "1543d308b342690a",
        "group": "93fae10c.09faa",
        "name": "viewer",
        "order": 3,
        "width": 6,
        "height": 4,
        "format": "<style>\n div.image {\n margin-left: auto;\n margin-right: auto;\n height: 100%\n }\n</style>\n\n<div class=\"image\">\n <img src=\"data:image/jpg;base64,{{msg.payload}}\" alt=\"wait...\" style=\"height:100%\">\n</div>\n \n ",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 440,
        "y": 1240,
        "wires": [
            []
        ]
    },
    {
        "id": "93fae10c.09faa",
        "type": "ui_group",
        "name": "Default",
        "tab": "6ff5405c.a8e6",
        "order": 1,
        "disp": true,
        "width": "20",
        "collapse": false,
        "className": ""
    },
    {
        "id": "6ff5405c.a8e6",
        "type": "ui_tab",
        "name": "TEST",
        "icon": "dashboard",
        "order": 8,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![wb666greene](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wb666greene/32/6534_2.png) [@wb666greene](https://discourse.nodered.org/u/wb666greene)\
**Post date:** [27 June 2023 22:03 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/13 "2023-06-27T22:03:18Z")

</div>

Thanks. Now it is close, images are centered but there is still a scrollbar on the right side of the frame that basically has nothing to scroll. How to get rid of it?

 ![Screenshot at 2023-06-27 16-58-15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c56cae9967937ab7b7ea92705425df2485ced222.jpeg)

 ![Screenshot at 2023-06-27 17-01-52](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/84893220fee53a40e37789e06e491bbefe085fbe.jpeg)

---

<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 July 2023 22:03 UTC](https://discourse.nodered.org/t/center-image-in-viewer-window/79277/14 "2023-07-27T22:03:20Z")

</div>

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