# Dashboard 2 center vertical and horizontal and still apply CSS

**URL:** https://discourse.nodered.org/t/dashboard-2-center-vertical-and-horizontal-and-still-apply-css/87958
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [14 May 2024 19:30 UTC](https://discourse.nodered.org/t/dashboard-2-center-vertical-and-horizontal-and-still-apply-css/87958 "2024-05-14T19:30:31Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)
#### Post date: [14 May 2024 19:30 UTC](https://discourse.nodered.org/t/dashboard-2-center-vertical-and-horizontal-and-still-apply-css/87958/1 "2024-05-14T19:30:31Z")

</div>

Getting closer to my dashboard 2 goal but hit a snag. I have a cell I want to align both horizontal and vertical. According to the research I can put class="d-flex justify-center align-center" and that seems to work  
 ![1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/64f741af23f784020ca2d7a8ee8ab087109cbf09.jpeg)

. But when I want to apply CSS to match the rest of the page it goes wonky.  
 ![2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a266708d2cc55cb9214820f8456e264f143cece7.jpeg)

tried putting the d-flex stuff in the CSS but didn't work. Anyone point out where I need to put the code?  
Thanks

```auto
[{"id":"8037f3d3212cddd2","type":"ui-template","z":"f2444842153e8653","group":"","page":"73e9e33592af85f3","ui":"","name":"thermostat","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-container class=\"bg-surface-variant\">\n <v-row>\n <v-col>\n <v-sheet class=\"TempAmbHeader\" style=\"height: 25px; width: 200px\">\n Temp Amb\n </v-sheet>\n <v-sheet class=\"d-flex justify-center align-center; TempAmbMain\" style=\"height: 250px; width: 200px\">\n .v-col-auto 1\n </v-sheet>\n </v-col>\n\n <v-col>\n <v-row>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 150px; width: 150px\">\n .v-col-auto 2 a\n </v-sheet>\n <v-col>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 75px; width: 50px\">\n 2 a\n </v-sheet>\n\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 75px; width: 50px\">\n 2 b\n </v-sheet>\n </v-col>\n </v-row>\n\n <v-row>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 100px; width: 100px\">\n 3 a\n </v-sheet>\n <v-col>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 100px; width: 100px\">\n 3 b\n </v-sheet>\n </v-col>\n </v-row>\n </v-col>\n </v-row>\n\n <v-row>\n <v-col>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 75px; width: 300px\">\n .v-col-auto 4\n </v-sheet>\n </v-col>\n\n <v-col>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 75px; width: 75px\">\n .v-col-auto 5\n </v-sheet>\n </v-col>\n\n <v-spacer></v-spacer>\n </v-row>\n </v-container>\n</template>\n\n","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":510,"y":80,"wires":[[]]},{"id":"38d79f8d23fb88f8","type":"ui-template","z":"f2444842153e8653","group":"26f4e0a77c051892","page":"","ui":"","name":"CSS","order":0,"width":0,"height":0,"head":"","format":"<style>\n.TempAmbHeader {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 25px !important;\nwidth: 200px !important;\nmargin-top: 5px;\nmargin-bottom: 1px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 16px;\ncolor: #6689a1;\npadding-bottom: 4px;\nborder-bottom: 2px solid #dd7f00;\nborder-top: 2px solid #6689a1;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.TempAmbMain {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 250px !important;\nwidth: 200px !important;\nmargin-top: 4px;\nmargin-bottom: 2px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 20px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.main1 {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nalign-items: center;\nheight: 25px !important;\nwidth: 300px !important;\nmargin-bottom: 1px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 18px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n\njustify: center;\nalign: center;\n}\n\n.a1 {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 25px !important;\nwidth: 140px !important;\nmargin-top: 5px;\nmargin-bottom: 1px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 16px;\ncolor: #6689a1;\npadding-bottom: 4px;\nborder-bottom: 2px solid #dd7f00;\nborder-top: 2px solid #6689a1;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.Fourpanel {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 50px !important;\nwidth: 140px !important;\nmargin-top: 4px;\nmargin-bottom: 2px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 30px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.OnePanelHeader {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 25px !important;\nwidth: 300px !important;\nmargin-top: 5px;\nmargin-bottom: 1px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 16px;\ncolor: #6689a1;\npadding-bottom: 4px;\nborder-bottom: 2px solid #dd7f00;\nborder-top: 2px solid #6689a1;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.OnePanelBottom {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 50px !important;\nwidth: 300px !important;\nmargin-top: 4px;\nmargin-bottom: 2px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 30px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.Threepaneltop {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 25px !important;\nwidth: 290px !important;\nmargin-top: 5px;\nmargin-bottom: 0px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 16px;\nborder-bottom: 2px solid #dd7f00;\ncolor: #6689a1;\npadding-bottom: 4px;\nborder-bottom: 2px solid #dd7f00;\nborder-top: 2px solid #6689a1;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.ThreepanelTopbottom {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 50px !important;\nwidth: 290px !important;\nmargin-top: 0px;\nmargin-bottom: 2px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 30px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.Threepanelbottom {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 50px !important;\nwidth: 140px !important;\nmargin-top: 4px;\nmargin-bottom: 2px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 30px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":510,"y":140,"wires":[[]]},{"id":"73e9e33592af85f3","type":"ui-page","name":"Thermostat","ui":"be93d1640cb1fd4c","path":"/Thermostat","icon":"home","layout":"grid","theme":"42ed612acbaa5b49","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"26f4e0a77c051892","type":"ui-group","name":"Thermostat","page":"73e9e33592af85f3","width":"6","height":"1","order":-1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"be93d1640cb1fd4c","type":"ui-base","name":"PageOne","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"42ed612acbaa5b49","type":"ui-theme","name":"MainTheme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#000000","groupBg":"#000000","groupOutline":"#000000"},"sizes":{"pagePadding":"2px","groupGap":"2px","groupBorderRadius":"4px","widgetGap":"2px"}}]

```

---

<div class="post-metadata">

### Author: ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)
#### Post date: [14 May 2024 19:50 UTC](https://discourse.nodered.org/t/dashboard-2-center-vertical-and-horizontal-and-still-apply-css/87958/2 "2024-05-14T19:50:47Z")

</div>

Hi

Tried, and it seems that is a extra "semicolon"

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/31751a93d86cef1faa94d5504237000c185c28ea.png)

Just remove the semicolon you have in that statment, and the page seems OK (equal to your first screenshoot)

The alternative seems to be, to remove the `d-flex justify-center align center`. And add `align-items: center;` the the CSS class `TempAmbMain`.

---

<div class="post-metadata">

### Author: ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)
#### Post date: [14 May 2024 22:25 UTC](https://discourse.nodered.org/t/dashboard-2-center-vertical-and-horizontal-and-still-apply-css/87958/3 "2024-05-14T22:25:18Z")

</div>

ARGH!! leaving the d-flex in the v-sheet seems to work, when I put in your code in the CSS it didn't work for me Thanks for the help

---

<div class="post-metadata">

### Author: ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)
#### Post date: [14 May 2024 23:20 UTC](https://discourse.nodered.org/t/dashboard-2-center-vertical-and-horizontal-and-still-apply-css/87958/4 "2024-05-14T23:20:18Z")

</div>

Hi

Sorry, I made a mistake on the answer.

You have to leave the `d-flex TempAmbMain", and you can add the `align-items: center;` to the css.

If you delete the `d-flex` it will stop working. Without the `d-flex` the css directives `justify-content` and `align-items` are not applied

The example:

```auto
[
    {
        "id": "8037f3d3212cddd2",
        "type": "ui-template",
        "z": "30eb969b7f1b1a54",
        "group": "",
        "page": "73e9e33592af85f3",
        "ui": "",
        "name": "thermostat",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <v-container class=\"bg-surface-variant\">\n <v-row>\n <v-col>\n <v-sheet class=\"TempAmbHeader\" style=\"height: 25px; width: 200px\">\n Temp Amb\n </v-sheet>\n <v-sheet class=\"d-flex TempAmbMain\" style=\"height: 250px; width: 200px\">\n .v-col-auto 1\n </v-sheet>\n </v-col>\n\n <v-col>\n <v-row>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 150px; width: 150px\">\n .v-col-auto 2 a\n </v-sheet>\n <v-col>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 75px; width: 50px\">\n 2 a\n </v-sheet>\n\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 75px; width: 50px\">\n 2 b\n </v-sheet>\n </v-col>\n </v-row>\n\n <v-row>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 100px; width: 100px\">\n 3 a\n </v-sheet>\n <v-col>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 100px; width: 100px\">\n 3 b\n </v-sheet>\n </v-col>\n </v-row>\n </v-col>\n </v-row>\n\n <v-row>\n <v-col>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 75px; width: 300px\">\n .v-col-auto 4\n </v-sheet>\n </v-col>\n\n <v-col>\n <v-sheet class=\"pa-2 ma-2\" style=\"height: 75px; width: 75px\">\n .v-col-auto 5\n </v-sheet>\n </v-col>\n\n <v-spacer></v-spacer>\n </v-row>\n </v-container>\n</template>\n\n",
        "storeOutMessages": true,
        "passthru": false,
        "resendOnRefresh": true,
        "templateScope": "widget:page",
        "className": "",
        "x": 1570,
        "y": 860,
        "wires": [
            []
        ]
    },
    {
        "id": "38d79f8d23fb88f8",
        "type": "ui-template",
        "z": "30eb969b7f1b1a54",
        "group": "26f4e0a77c051892",
        "page": "",
        "ui": "",
        "name": "CSS",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<style>\n.TempAmbHeader {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 25px !important;\nwidth: 200px !important;\nmargin-top: 5px;\nmargin-bottom: 1px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 16px;\ncolor: #6689a1;\npadding-bottom: 4px;\nborder-bottom: 2px solid #dd7f00;\nborder-top: 2px solid #6689a1;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.TempAmbMain {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nalign-items: center;\nheight: 250px !important;\nwidth: 200px !important;\nmargin-top: 4px;\nmargin-bottom: 2px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 20px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.main1 {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nalign-items: center;\nheight: 25px !important;\nwidth: 300px !important;\nmargin-bottom: 1px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 18px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n\njustify: center;\nalign: center;\n}\n\n.a1 {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 25px !important;\nwidth: 140px !important;\nmargin-top: 5px;\nmargin-bottom: 1px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 16px;\ncolor: #6689a1;\npadding-bottom: 4px;\nborder-bottom: 2px solid #dd7f00;\nborder-top: 2px solid #6689a1;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.Fourpanel {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 50px !important;\nwidth: 140px !important;\nmargin-top: 4px;\nmargin-bottom: 2px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 30px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.OnePanelHeader {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 25px !important;\nwidth: 300px !important;\nmargin-top: 5px;\nmargin-bottom: 1px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 16px;\ncolor: #6689a1;\npadding-bottom: 4px;\nborder-bottom: 2px solid #dd7f00;\nborder-top: 2px solid #6689a1;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.OnePanelBottom {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 50px !important;\nwidth: 300px !important;\nmargin-top: 4px;\nmargin-bottom: 2px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 30px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.Threepaneltop {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 25px !important;\nwidth: 290px !important;\nmargin-top: 5px;\nmargin-bottom: 0px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 16px;\nborder-bottom: 2px solid #dd7f00;\ncolor: #6689a1;\npadding-bottom: 4px;\nborder-bottom: 2px solid #dd7f00;\nborder-top: 2px solid #6689a1;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.ThreepanelTopbottom {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 50px !important;\nwidth: 290px !important;\nmargin-top: 0px;\nmargin-bottom: 2px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 30px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n\n.Threepanelbottom {\nbackground-color: black;\njustify-content: center;\ntext-align: center;\nheight: 50px !important;\nwidth: 140px !important;\nmargin-top: 4px;\nmargin-bottom: 2px;\nmargin-left: 5px;\nmargin-right: 5px;\nfont-size: 30px;\ncolor: white;\nborder-bottom: 2px solid #6689a1;\nborder-top: 2px solid black;\nborder-left: 2px solid #6689a1;\nborder-right: 2px solid #6689a1;\n}\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1570,
        "y": 920,
        "wires": [
            []
        ]
    },
    {
        "id": "73e9e33592af85f3",
        "type": "ui-page",
        "name": "Thermostat",
        "ui": "f10950b00cebceb1",
        "path": "/Thermostat",
        "icon": "home",
        "layout": "grid",
        "theme": "42ed612acbaa5b49",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "26f4e0a77c051892",
        "type": "ui-group",
        "name": "Thermostat",
        "page": "73e9e33592af85f3",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f10950b00cebceb1",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "42ed612acbaa5b49",
        "type": "ui-theme",
        "name": "MainTheme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#000000",
            "groupBg": "#000000",
            "groupOutline": "#000000"
        },
        "sizes": {
            "pagePadding": "2px",
            "groupGap": "2px",
            "groupBorderRadius": "4px",
            "widgetGap": "2px"
        }
    }
]

```

---

<div class="post-metadata">

### Author: ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)
#### Post date: [15 May 2024 02:18 UTC](https://discourse.nodered.org/t/dashboard-2-center-vertical-and-horizontal-and-still-apply-css/87958/5 "2024-05-15T02:18:13Z")

</div>

Thanks for the heads up, still fighting the battle but slowly winning

---

<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: [29 May 2024 02:18 UTC](https://discourse.nodered.org/t/dashboard-2-center-vertical-and-horizontal-and-still-apply-css/87958/6 "2024-05-29T02:18:49Z")

</div>

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