Custom Button Card Zentrieren

Dashboard/Cards/Frontend
1

Ich bräuchte hilfe bei einer einfacheren Custom Button Card. Ich mache gerade mein mobiles Dashboard neu und habe oben drei simple Buttons erstellt die ohne viel Schnickschnack was Anzeigen. Mein problem ist die sind linksbündig wie auf dem Screenshot zu sehen. ich möchte diese aber gerne mittig zentrieren. Habe bis jetzt die Lösung nicht finden können.

Unbenannt
Unbenannt921×2048 69.4 KB

square: false
type: grid
columns: 3
cards:
  - type: custom:button-card
    entity: alarm_control_panel.alarmo
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 50%
        - box-shadow: 0 4px 8px rgba(0,0,0,0.3)
        - width: 80px
        - height: 80px
        - margin: 8px
      icon:
        - color: white
        - width: 42px
        - height: 42px
    state:
      - value: disarmed
        styles:
          card:
            - background-color: "#252a38"
      - value: armed_home
        styles:
          card:
            - background-color: rgba(255, 193, 7, 0.3)
      - value: armed_away
        styles:
          card:
            - background-color: "#41644A"
      - value: arming
        styles:
          card:
            - background-color: "#C69062"
            - animation: blink 1s infinite
      - value: triggered
        styles:
          card:
            - background-color: rgba(255, 0, 0, 0.6)
            - animation: blink 1s infinite
    card_mod:
      style: |
        ha-card {
          border: none
        }
  - type: custom:button-card
    entity: binary_sensor.fenster_wohunng
    icon: mdi:window-open-variant
    show_name: false
    show_state: false
    tap_action:
      action: none
    state:
      - value: "on"
        icon: mdi:window-open-variant
        styles:
          card:
            - background-color: "#40A2D8"
      - value: "off"
        icon: mdi:window-closed-variant
        styles:
          card:
            - background-color: "#252a38"
    styles:
      card:
        - border-radius: 50%
        - box-shadow: 0 4px 8px rgba(0,0,0,0.3)
        - width: 80px
        - height: 80px
        - margin: 8px
      icon:
        - color: white
        - width: 42px
        - height: 42px
    card_mod:
      style: |
        ha-card {
          border: none
        }
  - type: custom:button-card
    entity: sensor.message_licht
    show_name: false
    show_state: false
    tap_action:
      action: none
    styles:
      card:
        - border-radius: 50%
        - box-shadow: 0 4px 8px rgba(0,0,0,0.3)
        - width: 80px
        - height: 80px
        - margin: 8px
      icon:
        - color: white
        - width: 42px
        - height: 42px
      state:
        - font-size: 14px
        - color: white
        - font-weight: bold
    state:
      - value: none
        icon: mdi:check-bold
        styles:
          card:
            - background-color: "#252a38"
      - operator: default
        icon: mdi:alert-circle
        styles:
          card:
            - background-color: "#C96868"
    card_mod:
      style: |
        ha-card {
          border: none;
        }
card_mod:
  style: |
    ha-card {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px;
    }
2

Pack sie doch einfach einzeln in die Badges.

IMG_0770
IMG_07701264×378 62.5 KB

Und card_mod brauchst du nicht bei custom:button-card.

3

danke aber die sollen keine badges sein :slight_smile: sondern unter dem reiter home erscheinen

4

und die 3 in einen horizontal stack / Querstapel packen geht nicht?

5

Dann musst du die Karte` etwas umstellen:


type: custom:button-card
entity: alarm_control_panel.alarmo
show_name: false
show_state: false
styles:
  card:
    - border: none
    - box-shadow: none
    - background: none
  img_cell:
    - width: 80px
    - height: 80px
    - border-radius: 50%
    - box-shadow: 0 4px 8px rgba(0,0,0,0.3)
    - background: lightgrey
  icon:
    - color: white
    - width: 42px
    - height: 42px
1 „Gefällt mir“