Zentrieren des Titel einer Überschrift-Karte "type: heading"?

Dashboard/Cards/Frontend
1

Hallo,

gibt es eine Möglichkeit, den Titel einer Überschrift-Karte “type: heading” zu zentrieren?

Hier habe ich eine Lösung für Dashboard “type: entities” gefunden.
Das funktioniert aber nicht bei Überschrift “type: heading”.

card-mod im HACS ist installiert.
Ich habe diesen Code eingefügt:

card_mod:
  style: |
    .card-header {
      justify-content: center !important;
    }

Aber der Titel steht immer noch linksbündig.

YAML:

type: heading
card_mod:
  style: |
    .card-header {
      justify-content: center !important;
    }
heading: Status
heading_style: title
icon: mdi:garage
grid_options:
  columns: full
2

mh…

das müsste eigentlich die Class card-header sein

versuch mal bitte:

type: heading
heading: Status
heading_style: title
icon: mdi:garage
card_mod:
  style: |
    .card-header {
      justify-content: center !important;
      text-align: center !important;
      width: 100%;
    }
grid_options:
  columns: full
3

Danke.

Aber leider keine Änderung.
Der Titel steht immer noch linksbündig.

4

versuche es mal damit:

type: heading
heading: Status
heading_style: title
icon: mdi:garage
card_mod:
  style: |
    .container  {
     justify-content: center !important;
     }
1 „Gefällt mir“
5

Funktioniert perfekt. :+1:
Besten Dank. :clap:

Screenshot_2026-04-05_15-48-23

Wie bist Du auf die Lösung gekommen?
Kannst Du dazu bitte was sagen.

Mich interessiert auch immer, was die Syntax im einzelnen bewirkt.
Alles was nach style: kommt, ist reine CSS Syntax.
Das meiste habe ich herausgefunden.

Aber was bewirkt der Punkt vor .container?
Bedeutet das, dass sich die Syntax auf sich selbst bezieht?

justify-content: richtet das Element horizontal aus
justify-content: center zentriert das Element horizontal
https://www.w3schools.com/cssref/css3_pr_justify-content.php

!important weist die höchste Priorität zu und überschreibt ALLE vorherigen Formatierungsregeln für diese Eigenschaft!
https://www.w3schools.com/Css/css_important.asp

6

Der Punkt vor container bedeutet das es eine CSS-Klasse ist.

Das ist der Container <div class=”container”>…</div>

ansprechen tut man den mittels .container {...}

Die Definitionen findest du wenn du im Browser F12 drückst. dann kannstr du den DOM durchsuchen.

1 „Gefällt mir“
7

Ich habe das von hier: https://community.home-assistant.io/t/align-text-of-heading-card/972749/3

1 „Gefällt mir“