Oh-image-card, align center

Setup, Configuration and Use Items & Sitemaps
1

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
config:
  item: FrigoStatusImg
  title: Frigo
  action: analyzer
  actionAnalyzerItems:
    - Sch_OnOff3_Watts
  style:
    max-width: 125px
  footer: = "Verbruik is " + items.Sch_OnOff3_Watts.state + " W"
slots: null
2

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):

style:
  max-width: 20%
  padding-left: 40%
  padding-right: 40%
2 Likes