Zentrieren von "titel" im Dashboard für entities

Hallo,
gibt es eine Möglichkeit, bei cards wir entities z.B. den Titel zu zentrieren?

Danke und viele Grüße
Jo

Hallo,

füge am Beginn der Karte folgende ein:

type: entities
card_mod:
  style: |
    .card-header {
    justify-content: center;
    }

image

1 „Gefällt mir“

Bitte erwähnen das dafür Card-mod installiert sein muss. :slight_smile:

https://github.com/thomasloven/lovelace-card-mod

Stimmt, die Installation von card_mod hatte ich vergessen zu erwähnen.

1 „Gefällt mir“

Danke für euere schnelle Hilfe !

Leider hatte ich mich zu früh gefreut. Es klappt nicht

wie man sieht kann ich die Farben / Icons ändern, aber das Zentrieren geht nicht

Screenshot 2024-04-05 085527

hier der code:

type: entities
title: Farb. und Zentriertest
entities:
  - entity: light.zx_2983_8
    card_mod:
      style: |
        :host {
          color: blue;
          text-align: right;
          border-style: dotted dashed solid double;
          background-color: yellow;
        }
  - entity: light.zx_2983_9
    card_mod:
      style: |
        :host {
          color: green;
          text-align: center;
        }
  - entity: light.bodenlicht_3
    card_mod:
      style: |
        :host {
          color: purple;
          --card-mod-icon: mdi:bed;
          font-family: verdana;
          font-size: 22px;  
          text-align: left;
          opacity: 0.5;
        }
state_color: true
show_header_toggle: false
card_mod:
  style: |
    .card-header {
      justify-content: center;
      color: Tomato;
      background-color: lightgreen;
      text-align: center;
      text-align-last: center; /* so von Simon42 justify-content: center; */
      border-style: dotted dashed solid double;
      }
    ha-card {
     /* justify-content: center; 
      color: Tomato;
      text-align: center; */
      /* text-align-last: center;*/ /* so von Simon42 justify-content: center; */
      border-style: dotted dashed solid double;
      background-color: lightblue;
      }      

Ich habe gefühlt alle Komibationen mit “center” wie
text-align-last: center;
durchgespielt, aber kein Erfolg

Hat jemand eine Idee, was ich falsch mache?
Danke und beste Grüße

Jo

Hallo,

nimm mal die Zeilen mit dem text-align beim .card-header raus. Vielleicht beißt ishc hier etwas.
In meinem Beispiel oben ist lediglich das justify-content: center drin und damit wird der Text zentriert. Bewies ist der Screenshot.
Im Zweifelsfall auch mal die Reihenfolge im Code ändern und das card_mod direkt oben unter type setzen, statt ans Ende der Karte.

danke für deine Hilfe,
Egal was ich mache… es Zentriert nicht… es ist zum Verrücktwerden…

Ok, bei mir grad auch seltsam.
Im Browser auf dem Handy ist der Titel nicht mittig.
Jetzt muss ich mal schauen, ob er mittig ist, wenn ich wieder zu Hause im Browser auf das Dashboard gehe. Dort kann ich dann auch das Element noch mal untersuchen, ob sich da etwas geändert hat.

Nachtrag:
Also es hat bei mir dann auch am PC den Titel nicht mehr zentriert. Mit Element untersuchen konnte man auch sehen, dass justify-content: center; durchgestrichen, also ignoriert wurde und die Standardeinstellung justify-content: space-between; aktiv war.
Mit Ergänzung von !mportant funktioniert es dann wieder.

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

@bigmirror ES KLAPPT DANKE. :star_struck:
Wie bist du nur auf den Trick mit !important gekommen. Ich habe so viel gegoogelt aber darauf bin ich nirgends gestoßen.

Beste Grüße

Jo

Zentriert OK !Screenshot 2024-04-08 131356

Das !important hab ich hier schon häufiger gesehen, dass es an card_mod Veränderungen dran hing.
Nach dem ich bei Element untersuchen im Browser dann gesehen habe, dass die center Einstellung ignoriert wurde, hab ich es einfach probiert.