Center HTML Link In Markdown Card

Configuration Frontend
1

I see various conflicting information about the proper way to center text in a markdown card. I’d simply like to center the following markdown code.

[Global Disaster Alert System (GDACS) Advisories](/map)

If I use the <center> </center> tag it works, but then extra space gets added to the simple banner I’m trying to create. It gets much thicker like it adds a break or something.

What’s the proper way to do this, if at all?

Thanks!

2

Using the <center>...</center> is the proper way to center tex in Markdown and it works for me without any extra space or thick text. Can you post your exact markdown code to see if it can be reproduced?

3

Before…

type: conditional
conditions:
  - entity: sensor.nws_alerts
    state_not: '0'
  - entity: sensor.nws_alerts
    state_not: unavailable
card:
  type: markdown
  content: '[National Weather Service Advisories](/lovelace/weather-alerts)'
  theme: Vintage Bungalow Alerts

Before

After…

type: conditional
conditions:
  - entity: sensor.gdacs_moulton_street
    state_not: '0'
  - entity: sensor.gdacs_moulton_street
    state_not: unavailable
card:
  type: markdown
  content: '[<center>Global Disaster Alert System (GDACS) Advisories</center>](/map)'
  theme: Vintage Bungalow Alerts

After

This is the one that is active so you can see, but it does the same even if the text isn’t quite filling the width as much… It just adds space, although it is centered…

4

Have you tried tagging outside of the URL markup?

<center>[Global Disaster Alert System (GDACS) Advisories](/lovelace/weather-alerts)</center>
5

Oh yeah… That doesn’t end well. LOL

type: conditional
conditions:
  - entity: sensor.gdacs_moulton_street
    state_not: '0'
  - entity: sensor.gdacs_moulton_street
    state_not: unavailable
card:
  type: markdown
  content: >-
    <center>[Global Disaster Alert System (GDACS)
    Advisories](/lovelace/weather-alerts)</center>
  theme: Vintage Bungalow Alerts

Outside

6

I think this has a lot to do with the fact that this is a link, and not plain text.

7

If you don’t insist on using the markdown declaration for the link just use a plain html <a> tag:

type: conditional
conditions:
  - entity: sensor.gdacs_moulton_street
    state_not: '0'
  - entity: sensor.gdacs_moulton_street
    state_not: unavailable
card:
  type: markdown
  content: >-
    <center><a href="/lovelace/weather-alerts">Global Disaster Alert System (GDACS) Advisories</a></center>
  theme: Vintage Bungalow Alerts