Need some CSS expertise and help me text-align this button using ♡♡ in a text string

Configuration Frontend
1

used

type: custom:button-card
entity: sensor.marquee_alerts
show_icon: false
variables:
  count: >
    [[[ return entity.state; ]]]
  phrase: >
    [[[ return (entity.state == 1) ? 'Alert:&nbsp' : 'Alerts:&nbsp'; ]]]
  marquee: >
    [[[ return entity.attributes.marquee; ]]]

tap_action:
  action: none
styles:
  card:
    - background-color: var(--background-color-off)
    - color: var(--text-color-off)
    - font-size: 20px
    - font-weight: 400
    - padding: 12px
  name:
    - justify-self: stretch
name: >
  [[[ return `<div style='display: flex';>
      <div>${variables.count} ${variables.phrase}</div>
      <span style='width:100%;'>
      <marquee>${variables.marquee}</marquee></span>`; ]]]

for years and dont think this ever showed incorrectly, but since it holds and unclosed div, I figured I had to correct that.

However, both the original yaml above, and the latest version with all styling moved to the button-card config itself, show the count and phrase strings off center while the marquee is perfect as ever, or so it seems:

Scherm­afbeelding 2023-02-20 om 07.58.22
Scherm­afbeelding 2023-02-20 om 07.58.221092×134 39.7 KB 

type: custom:button-card
entity: sensor.marquee_alerts
show_icon: false
variables:
  count: >
    [[[ return entity.state; ]]]
  phrase: >
    [[[ return (entity.state === 1) ? 'Alert:&nbsp' : 'Alerts:&nbsp'; ]]]
  marquee: >
    [[[ return entity.attributes.marquee; ]]]

tap_action:
  action: none
styles:
  card:
    - background-color: var(--background-color-off)
    - color: var(--text-color-off)
    - font-size: 20px
    - font-weight: 400
    - padding: 10px 12px
  name:
    - justify-self: stretch
    - width: 100%
    - display: flex
#     - text-align: center
name: >
  [[[ return `<div>${variables.count} ${variables.phrase}</div>
              <div><span><marquee>${variables.marquee}</marquee></span></div>`; ]]]

As you can see I also tried the text-align: center but it makes no difference at all. If I replace the marquee, which essentially is only returning a long string of text, with a long string of hardcoded text:

thisisatext thisisatext thisisatext thisisatext thisisatext

to do

name: >
  [[[ return `<div>${variables.count} ${variables.phrase}</div>
              <div><span'><marquee>thisisatext thisisatext thisisatext thisisatext thisisatext</marquee></span></div>`; ]]]

the button card changes height slightly and makes it all center nicely:

Scherm­afbeelding 2023-02-20 om 08.10.39
Scherm­afbeelding 2023-02-20 om 08.10.391152×118 37.1 KB

so, apparently, the marquee string makes the card use a higher height, causing the first part of the name (count_phrase) to show off center, but aligning the marquee correctly…

on this occasion the marquee string contains:

jaar getrouwd ♡♡

and these hearts apparently cause the issue… confess I never noticed that before, then again, it only happens once a year :wink:

long story short: why, and most importantly, how to fix?

please have a look, thanks!