Hi All,
Sorry if this is in the wrong forum - and appreciate that this may be more of a CSS formatting question, but I am looking at aligning my text in the middle of a card using the add-on - lovelace-card-mod
I’ve tried aligning using the following code:
- type: 'custom:simple-thermostat'
entity: climate.kitchen
show_header: false
control: false
step_layout: row
step_size: '0.5'
hide:
temperature: true
state: true
style: |
ha-card {
--st-font-size-xl: 20px;
--st-font-size-m: 20px;
--st-font-size-title: 20px;
--st-font-size-sensors: 20px;
--st-spacing: 1px;
color: black;
height: 192px;
text-align: center;
vertical-align: middle;
}
But I am just seeing the following:
Is it possible to vertically align the text to the center?
Thanks
Leacho
You’ll get more responses asking here: 🔹 Card-mod - Add css styles to any lovelace card
There are users there that have great experience with card mod and css.
1 Like
Thanks @ASNNetworks - all done! cheers for the super quick reply!
1 Like
Could you tell us what the solution was?
2 Likes
anru82
January 29, 2023, 10:20pm
5
Hi! Did you find a solution for this, I have the same problem and I can’t figure out the solution. Thank you!
mkanet
(MKANET)
August 19, 2023, 12:48am
6
When we do searches for this, this thread always comes up, not where the actual solution is. People keep reaching to this thread.
erlendds
(erlendds)
November 25, 2023, 9:31pm
7
It’s 2023 and this thread still shows up first in search…
1 Like
doenau
(Andrew)
January 9, 2024, 11:11pm
8
Whilst not strictly centered, you could use “padding” and adjust til it fits (assuming a fixed-size card).
Here’s an example (note the newer card-mod-3 syntax), which adds 15px of padding to the top
type: custom:simple-clock-card
hide_seconds: true
bold_clock: false
font_size: 8rem
card_mod:
style: |
ha-card {
height: 165px !important;
padding: 15px
}
ArnoHA
(Arno)
January 28, 2024, 6:18pm
9
still no solution? (padding didn’t work)