How to center a picture in card on dashboards

Schmidtjanroman · February 20, 2026, 6:48am

Hi,
I have several pictures of my heating pump which are shown on my dahsboard related to the device status.
On computer or mobile, the card gets different ratios depending on resolution and window given space.
That leads to the point that the ratio of the card gets different but the picture inside is alwas shown top centered.
Tired couple of YAML configuraitons with Gemini, CGPT or Deepseek but none of their YAML configurations worked.

What I want it to look like is a total centered alignment, do you have any ideas on that?

type: picture
grid_options:
  columns: 2
  rows: 2
image: /api/image/serve/8be107cb7f8318300cc29961a6537f76/512x512
hold_action:
  action: none
visibility:
  - condition: state
    entity: binary_sensor.thz_5_5_eco_heizkreispumpe
    state: "on"
tap_action:
  action: none

Configuration on the Dashboard

Dashboard Card YAML

Look and alignment when ratio changes, top centered

Look on my mobile with also another ratio, top centred

Here are some Examples from AI, none of them worked.

type: picture
image:
  media_content_id: media-source://image_upload/d39dc0744d2f1316bf9da758c95e6d15
  media_content_type: image/png
  metadata:
    title: not-zusatzheizung _gross.png
    thumbnail: /api/image/serve/d39dc0744d2f1316bf9da758c95e6d15/256x256
    media_class: image
    navigateIds:
      - {}
      - media_content_type: app
        media_content_id: media-source://image_upload
visibility:
  - condition: state
    entity: binary_sensor.thz_5_5_eco_elektrische_nacherwaermung
    state: "on"
grid_options:
  columns: 2
  rows: 2
card_mod:
  style: |
    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

type: picture-elements
image:
  media_content_id: media-source://image_upload/d39dc0744d2f1316bf9da758c95e6d15
  media_content_type: image/png
  metadata:
    title: not-zusatzheizung _gross.png
    thumbnail: /api/image/serve/d39dc0744d2f1316bf9da758c95e6d15/256x256
    media_class: image
    navigateIds:
      - {}
      - media_content_type: app
        media_content_id: media-source://image_upload
elements:
  - type: image
    entity: binary_sensor.thz_5_5_eco_elektrische_nacherwaermung
    image: /api/image/serve/d39dc0744d2f1316bf9da758c95e6d15/original
    style:
      left: 50%
      top: 50%
      width: 100%
      transform: translate(-50%, -50%)
      object-fit: contain
visibility:
  - condition: state
    entity: binary_sensor.thz_5_5_eco_elektrische_nacherwaermung
    state: "on"
grid_options:
  columns: 2
  rows: 2

type: markdown
content: >
  <div style="text-align: center;">
    <img src="/api/image/serve/d39dc0744d2f1316bf9da758c95e6d15/original" style="max-width: 100%; height: auto;">
  </div>
visibility:
  - condition: state
    entity: binary_sensor.thz_5_5_eco_elektrische_nacherwaermung
    state: "on"
grid_options:
  columns: 2
  rows: 2

Ildar_Gabdullin · February 20, 2026, 9:06am

Please do not even post them.
Will check your issue.

Schmidtjanroman · February 25, 2026, 6:44am

Hello Community, any ideas or help on this topic?

Ildar_Gabdullin · February 25, 2026, 9:32am

Sorry, will check the issue soon((

Mariusthvdb · February 25, 2026, 10:07am

define ‘centered’:

image centered to the card center, or maybe section/view center

given you also show a name on that type: picture, do you still need that, as it will shift the center
etcetc

also, you show 3 different type cards, which do you need help for?

as a suggestion, did you try a grid card?

you can set option square: false and make those images show nicely

instead of

Ildar_Gabdullin · February 25, 2026, 11:26am

Away from a PC, typing from a mobile, can you test a picture elements card? This allows to place images centrally. There are of course plenty of other ways, but try the picture elements way, at least for learning:

type: picture-elements
elements:
  - type: image
    …
    style:
      top: 50%
      left: 50%

Schmidtjanroman · March 9, 2026, 12:51pm

Yes, I do use grid, tried both options but this doesnt effect the result.
What i want to do is to center the picture inside a card.

type: grid
square: false
cards:
  - type: picture-elements
    elements:
      - type: image
        style:
          top: 50%
          left: 50%
    image: /api/image/serve/3b38e16f0fb39ef90fd471cc70f1690f/512x512
    grid_options:
      columns: 2
      rows: 2
  - type: picture
    image: /api/image/serve/3b38e16f0fb39ef90fd471cc70f1690f/512x512
    grid_options:
      columns: 2
      rows: 2

Any more ideas on that?

Ildar_Gabdullin · March 9, 2026, 5:21pm

Well, as I suggested:

type: grid
columns: 2
cards:
  - type: picture-elements
    elements:
      - type: image
        style:
          top: 50%
          left: 50%
        image: /local/images/test/Stan_small.png
    image: /local/images/test/white.jpg
  - type: entity
    entity: sun.sun