Custom button card - align text center

Configuration Frontend
1

I have a really simple button showing the status and I want to display a custom field underneath but as you see the text is aligning right. Can anyone suggestion how I can make it centre, underneath the name?

image

type: custom:button-card
size: 80px
tap_action:
  action: call-service
  service: automation.trigger
  service_data:
    entity_id: automation.heating_on_if_temp_low_in_morning_duplicate
show_name: true
show_label: false
name: |
  [[[
    var sta = states['climate.hall'].attributes.hvac_action;
    return 'Status: ' + "" + sta + ""   ;
  ]]]
icon: mdi:fire
styles:
  grid:
    - grid-template-areas: '"i" "n" "s"'
    - grid-template-columns: 100%
    - grid-template-rows: min-content min-content 1fr
  card:
    - background-color: '#fff'
    - border-radius: 10%
  name:
    - font-size: 14px
    - color: black
  icon:
    - color: |
        [[[
          if (states['climate.hall'].attributes.hvac_action == 'off') return 'blue';
          else return 'orange';
        ]]]
  custom_fields:
    boost:
      - color: black
      - justify-self: end
custom_fields:
  boost: |
    [[[
      return `<ha-icon
        icon="mdi:thermometer"
        style="width: 12px; height: 12px; color: yellow;text-align:center">
        </ha-icon><span>${states['sensor.timer_60minutes_remaining'].state}</span>`
    ]]]
2

You’re missing the custom field in your grid template area. Once you add that, you’ll need to adjust the sizer for that here

You need to add a style centering the text for the state, similar to your name, using text-align: center or justify-self: center

2 Likes