Vertical centering in picture elements

Configuration Frontend
1

I’ve just completed my floorplan using picture elements. This was realatively easier than I was expecting (nice)

image
image1904×1152 109 KB

but the floating positioning using ‘left’ and ‘top’ in CSS is getting me insane (I know just the basics I must admit). This ofc refers to the middle of the box of a given card and, although annoying to place, it works…statically

But when I use the searchbox, the limitation of this positioning dramatically shows.

Casa – Home Assistant - Opera 14_01_2023 10_48_58
Casa – Home Assistant - Opera 14_01_2023 10_48_581904×1152 115 KB

is there a different way for positioning the card from the top, so it won’t scroll up?

This is the code I’m using to place the element:

    - type: custom:search-card
      max_results: 10
      style:
        top: 8%
        left: 25%
        width: 30%

tnx in advance for any suggestion!

2

Have a play with the transform item within the style item.

    style:
      left: 50%
      top: 2.5%
      width: 32%
      transform: translate(-50%, 0%)

You can change how elements are positioned.

1 Like
3

awesome! works perectly! tnx allot!

1 Like