Is there a way to align information on a mushroom template card?

Good afternoon all,
I’ve been tinkering with a card I’m using to provide weather and astronomical information on my dashboard. All the information is there and what I want, however, I’m struggling with getting some of the information in a mushroom template part of the stacked card to align to the center of that particular card.

In the screen shot above, I want the information where it says “Sunset is today at” and “Next Moonrise”, which are primary information in the card, and the secondary information, which is the time below, to be centered. Any advice on how I can do this?

Below is my code. Note that much of this is nested in conditional cards, so it will display different information during the day or at night, depending upon the moon or sun being up or set.

type: custom:stack-in-card
mode: vertical
cards:
  - type: horizontal-stack
    style: |
      ha-card {
        border: none;
      }
    cards:
      - show_current: true
        show_forecast: false
        type: weather-forecast
        style: |
          ha-card {
            border: none;
          }
        entity: weather.openweathermap
      - type: conditional
        style: |
          ha-card {
            border: none;
          }
        conditions:
          - entity: binary_sensor.moonrise
            state: 'on'
        card:
          type: custom:mushroom-template-card
          style: |
            ha-card {
              border: none;
            }
          primary: Moon phase
          secondary: '{{ states(''sensor.moon_phase'') | replace(''_'','' '') | capitalize}}'
          picture: |-
            {% if is_state('sensor.moon_phase', 'new_moon') %}
            /local/images/MoonPhases/new_moon.png
            {% elif is_state('sensor.moon_phase', 'waxing_crescent') %}
            /local/images/MoonPhases/waning_crescent.png
            {% elif is_state('sensor.moon_phase', 'first_quarter') %}
            /local/images/MoonPhases/first_quarter.png
            {% elif is_state('sensor.moon_phase', 'waxing_gibbous') %}
            /local/images/MoonPhases/waxing_gibbous.png
            {% elif is_state('sensor.moon_phase', 'full_moon') %}
            /local/images/MoonPhases/full_moon.png
            {% elif is_state('sensor.moon_phase', 'waning_gibbous') %}
            /local/images/MoonPhases/waning_gibbous.png
            {% elif is_state('sensor.moon_phase', 'last_quarter') %}
            /local/images/MoonPhases/last_quarter.png
            {% elif is_state('sensor.moon_phase', 'waning_crescent') %}
            /local/images/MoonPhases/waning_crescent.png
            {% endif %}
          fill_container: true
          multiline_secondary: false
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
  - type: horizontal-stack
    style: |
      ha-card {
        border: none;
      }
    cards:
      - type: conditional
        conditions:
          - entity: sun.sun
            state: below_horizon
        card:
          type: custom:mushroom-template-card
          style: |
            ha-card {
              border: none;
            }
          primary: >-
            {% set sunrise = state_attr('sun.sun', 'next_rising') | as_datetime
            | as_local %}
              Sunrise is {{ 'today' if sunrise.date() == now().date() else 'tomorrow' }} at
          secondary: '  {{ (state_attr(''sun.sun'', ''next_rising'')|as_datetime|as_local).strftime(''%-I:%M %p'') }}'
          icon: ''
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
          entity: sensor.nextsunrise
      - type: conditional
        conditions:
          - entity: sun.sun
            state: above_horizon
        card:
          type: custom:mushroom-template-card
          style: |
            ha-card {
              border: none;
            }
          primary: >-
            {% set sunset = state_attr('sun.sun', 'next_setting') | as_datetime
            | as_local %}

            Sunset is {{ 'today' if sunset.date() == now().date() else
            'tomorrow' }} at
          secondary: >-
            {{ (state_attr('sun.sun',
            'next_setting')|as_datetime|as_local).strftime('%-I:%M %p') }}
          icon: ''
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.moonrise
            state: 'on'
        card:
          type: custom:mushroom-entity-card
          style: |
            ha-card {
              border: none;
            }
          alignment: center
          entity: sensor.astroweather_moon_next_setting
          icon_type: none
          name: Next moonset
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.moonrise
            state: 'off'
        card:
          type: custom:mushroom-entity-card
          style: |
            ha-card {
              border: none;
            }
          alignment: center
          entity: sensor.astroweather_moon_next_rising
          name: Next Moonrise
          icon_type: none
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none

Thanks in advance for any assistance.

2 Likes

You could try adding the following after border: none;

              align-items: center;
1 Like