Centrer du texte sur carte En-tête

Entraide Home Assistant
1

Bonjour,

Comment centrer du texte sur une carte En-tête de base ?

HA à jour sur mini PC NUC
___texte en gras

2

Bonjour,
avec card_mod:

image
image1010×250 7.88 KB

card_mod:
  style: |
    .title > p {
      margin: 0 0 0 180px !important;
    }
3

OUWAOU Magique ça fonctionne au TOP
Pourrais-tu s’il te plait m’expliquer ce que représente 180px et !important ?
Encore merci c’est génial

4

c’est la marge de gauche a 180px , par défaut c’est a 0px. le !important, c’est pour forcer l’utilisation du CSS.
C’est pas utile tout le temps, ca dépends des cartes.
si on le met pas ca fonctionne pas:

image
image1013×249 7.37 KB

5

OK Je viens de faire deux trois test c’est super
Encore merci WarC0zes

1 « J'aime »
6

En général la solution est à cocher sur le message qui l’indique :wink:
Comme ça d’autre utilisateur voient la solution dans ton sujet initial directement.

j’ai un doute que ton message, aide les utilisateurs.

7

En faisant divers test je remarque que la marge, c’est bien mais du coup ce n’est pas toujours au centre par exemple sur une tablette en mode paysage ou portrait, n’existe t-il pas une solution qui centre sans donner une marge mais une autre valeur.

8

peux être, mais pas d’autre solution a te proposer.

edit:
je viens d’avoir un flash :sweat_smile:
en utilisant @media screen and (max-width: 1000px) ou max-width: 1000px est la largeur max de l’écran et utilisera la modification voulu. Suivant la larguer tu applique un margin différent.

card_mod:
  style: |
    .title > p {
      margin: 0 0 0 180px !important;
    }
    @media screen and (max-width: 1000px) {
      .title > p {
        margin: 0 0 0 130px !important;
      }
    }
    @media screen and (max-width: 500px) {
      .title > p {
        margin: 0 0 0 100px !important;
      }
    }
9

Merci a toi, mais cela ne fonctionne pas vraiment top, n’y a t-il une manière de définir un pourcentage la c’est trop bizare ou alors comment puis-je savoir la définition quand c’est un telephone paysage ou portrait ou alors une tablette paysage portrait ?
c’est etonnant que l’on ne puisse définir que des pixels c’est domage.
Encore merci à toi.

10

essaye:

card_mod:
  style: |
    .title > p {
      margin-left: 80% !important;
      overflow: visible !important;
    }

edit:
enfaite non :frowning:
la nuit porte conseille, je verrai si je trouve une meilleure solution.

11

Je viens de trouver ci-dessous une solution avec l’aide de chatgpt après plusieurs essais sur la base que tu m’avais donné

card_mod:
  style: |
    .title {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: fit-content;
    }
    .title > p {
      margin: 0 0 0 1rem !important;  # Utilise rem pour la marge à gauche
      text-align: left;  # Assure que le texte est aligné correctement à l'intérieur
    }

Vraiment merci pour tout

1 « J'aime »
12

Ok, mais tu as l’icône qui est centré aussi. C’est ce que tu voulais ?