Align vertically via CSS

Third party integrations Floorplan
1

Hi all!
I used this excellent integration to simulate the control panel of a coffee machine:

image
image1419×855 77.8 KB

Please, can anyone tell me how I can do to vertically Align the panel via CSS?
I wish it was always vertically centered in its Home Assistant tab …

Thanks

2

Assuming you are using ha-floorplan how are you creating that image? If it is ha-floorplan you should have just drawn the image up aligned as you wanted it. Then you just set yout touch points and that is it?

3

I created this image in Photoshop.
Currently in my CSS:

#floorplan {
    padding: 13%;
}

#floorplan > svg {
    max-width: 800px;
}

svg {
    border-radius: 20px;
    border: 1px solid #FFFFFF;
    padding: 1px;
}

svg * {
    vector-effect: non-scaling-stroke !important;
}
4

The trouble is I think that this will vary depending upon the aspect ratio and resolution of the device you are viewing it on. If you want to centre it just one particular device I would work out the size of the panel and make your SVG that size. You can adjust the size in Inkscape by going to FILE>>DOCUMENT PROPERTIES and adjusting the custom size