Oh-image-card, align center

I’ve got following image card. But seems I can’t align the image in the center?
I had to limit the image a bit, because else my widget went insane big. :blush:

Schermafdruk van 2022-02-06 09.11.52

My yaml code:

component: oh-image-card
  item: FrigoStatusImg
  title: Frigo
  action: analyzer
    - Sch_OnOff3_Watts
    max-width: 125px
  footer: = "Verbruik is " + items.Sch_OnOff3_Watts.state + " W"
slots: null

The style property in this case is applying styles to the image element and not the image-element’s container. You could use the stylesheet method to inject some css for the container to alter how it positions child elements. However, in this case, since you are already modifying the image width, I suggest a much more basic approach.

Change your max-width to a % value instead (e.g., 20%). Then you can add left and right padding values to get to a total of 100% and that will center the image (and be a more size responsive layout anyway):

  max-width: 20%
  padding-left: 40%
  padding-right: 40%