How to vertical align images in a row with text in markdown-cards?

Hi all,

i have a problem that I cannot centre images vertically to a text.

I have created a list of petrol prices in a markdown card. Unfortunately, it doesn’t look very good. See also the screenshot.

I have installed the card_mod, but I can’t get the “vertical-align: middle;” to work on the images. Can anyone help me with the syntax? I have now done it like this:

type: markdown
content: >-
  # Benzinpreise E10:
  {% for entity in expand ('sensor.benzinpreise') |
  sort(attribute='state') | map(attribute='entity_id') | map('string') | list %}

  ## ![image](/local/img/{{ state_attr(entity, "friendly_name") }}.png)
      {{ states(entity) }} €

  {% endfor %}

card_mod:
  style: |
    img {
      vertical-align: middle;
      }

Screenshot 2023-12-11 110627

Did you found a solution ?

Yes. I found a solution. What worked for me is:

    card_mod:
      style:
        ha-markdown $: |
          img {
            vertical-align: middle !important;
          }
1 Like