How to align an img in Markdown

Configuration Frontend
1

using:

content: |
      from <font color='#03a9f4'><ha-icon icon=mdi:home-assistant ></ha-icon></font> to <a href='https://drive.google.com/drive/my-drive'><img src = '/local/various/google_drive.png' alt='Google Drive' align='middle' width='25' height='25'></img></a>

results in:

Schermafbeelding 2020-09-09 om 12.20.59

which is in need of some alignment improvement… does anyone know how I can change that?

thanks for having a look!

1 Like
2

That’s not markdown mate … those are HTML tags …

https://www.w3schools.com/howto/howto_css_image_center.asp

3

well, I meant in a markdown card of course… sorry

  - type: markdown
    title: >
      Home Assistant back-ups
    style: |
      ha-card {background: var(--card-background-color);}
      .card-header {color: var(--primary-color);font-weight: bold;}
    content: |
      from <font color='#03a9f4'><ha-icon icon=mdi:home-assistant></ha-icon></font> to <a href='https://drive.google.com/drive/my-drive'><img src='/local/various/google_drive.png' style='vertical-align:top' width='25' height='25'></img></a>

      **Snapshots:**
      {%- for sh in state_attr('sensor.snapshot_backup','snapshots') %}
        - Name: {{sh.name}}
          Date: {{as_timestamp(sh.date)|timestamp_custom('%d %b: %X')}}
          State: {{sh.state}} <br>
      <br/>
      {%- endfor %}
      ___
      **Details:**
        - Last snapshot: {{as_timestamp(state_attr('sensor.snapshot_backup','last_snapshot'))|timestamp_custom('%d %b: %X')}}
        - On Google Drive: {{state_attr('sensor.snapshot_backup','snapshots_in_google_drive')}}
        - In Hassio: {{state_attr('sensor.snapshot_backup','snapshots_in_hassio')}}

Schermafbeelding 2020-09-09 om 15.31.06
Schermafbeelding 2020-09-09 om 15.31.06820×504 34.8 KB

in the above yaml, ive also tried the style code, which does nothing either.

Petro says to use a span and I m not sure yet what you’d advise me here?

all for a simple image to align centered…

like:

Schermafbeelding 2020-09-09 om 15.38.04
Schermafbeelding 2020-09-09 om 15.38.04712×174 9.03 KB

    content: |
      from <font color='#03a9f4'><ha-icon icon=mdi:home-assistant></ha-icon></font> to <a href='https://drive.google.com/drive/my-drive'><font color='#4ca067'><ha-icon icon=mdi:google-drive></ha-icon></font></a>
4

even

      <span style='text-align: center;'>from <font color='#03a9f4'><ha-icon icon=mdi:home-assistant></ha-icon></font> to <a href='https://drive.google.com/drive/my-drive'><img src='/local/various/google_drive.png' width='25' height='25'></img></a></span>

or

      <div style="text-align: center;">from <font color='#03a9f4'><ha-icon icon=mdi:home-assistant></ha-icon></font> to <a href='https://drive.google.com/drive/my-drive'><img src='/local/various/google_drive.png' width='25' height='25'></img></a></div>

won’t align the GD icon, btw using text-align because https://stackoverflow.com/a/8392282

please help…

1 Like