Hello,
I feel I am missing something simple but I have spent far too long trying to see it. I have a set of buttons in a horizontal-stack which I would like to be centred, but for some reason they are stuck on the left of the screen:
I tried padding them manually to the middle of my phone screen, but different phones/screens mean it is not always centred. Is there a way to make it so that the row aligns to the middle of the screen, then if I have 1 button it would be in the middle but if I had 2 buttons they would be next to each other and between them aligned to the middle of the screen. Like this:
The code I am using looks like this:
- title: Living Room
background: center / cover no-repeat url("/local/Black_Background.jpg")
panel: true
cards:
- type: vertical-stack
cards:
- type: markdown
style: |
ha-card {
background: none;
border-radius: 6px;
color: white;
font-size: 30px;
text-shadow: 0px 0px 5px black;
height: 50px;
text-align: center;
padding-top: 5%;
#padding-left: 13%;
box-shadow: none;
}
content: >
Living Room
- type: entities
entities:
- entity: sensor.living_room_skyq
type: custom:multiple-entity-row
name: SkyQ Status
secondary_info: last-changed
- entity: sensor.living_room_lux
type: custom:multiple-entity-row
name: Living Room Light Level
icon: false
secondary_info: last-changed
- entity: sensor.living_room_occupancy
type: custom:multiple-entity-row
name: Living Room Occupancy
icon: false
secondary_info: last-changed
- entity: sensor.living_room_patio_door
type: custom:multiple-entity-row
name: Living Room Patio Door
icon: false
secondary_info: last-changed
style: |
ha-card {
background: none;
color: white;
font-weight: bold;
font-size: 15px;
text-align: left;
box-shadow: none;
}
- type: horizontal-stack
cards:
- type: "custom:button-card"
color_type: icon
entity: light.livingroom_lamp
template: Lighting_Button
name: Couch Lamp
- type: "custom:button-card"
template: Middle_Pad
- type: "custom:button-card"
color_type: icon
entity: light.livingroom_desk_lamp
template: Lighting_Button
name: Desk Lamp
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: Vetical_Pad
- type: horizontal-stack
cards:
- type: "custom:button-card"
color_type: icon
entity: light.livingroom_front_bulb
template: Lighting_Button
name: Front Light
- type: "custom:button-card"
template: Middle_Pad
- type: "custom:button-card"
color_type: icon
entity: light.livingroom_back_bulb
template: Lighting_Button
name: Back Light
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: Vetical_Pad
- type: horizontal-stack
cards:
- type: custom:button-card
name: >
Home Screen
styles:
card:
- opacity: 0.9
- width: 280px
- height: 40px
- background-color: '#121211'
- border-radius: 10%
- padding: 10%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- padding-bottom: 4px
tap_action:
action: navigate
navigation_path: '/ui-home-control/0/'
Thanks in advance for any help.
