Lovelace Card Mod - Vertically Aligning Text

Configuration Frontend
1

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:

image

Is it possible to vertically align the text to the center?

Thanks
Leacho

2

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
3

Thanks @ASNNetworks - all done! cheers for the super quick reply!

1 Like
4

Could you tell us what the solution was?

2 Likes
5

Hi! Did you find a solution for this, I have the same problem and I can’t figure out the solution. Thank you!

6

When we do searches for this, this thread always comes up, not where the actual solution is. People keep reaching to this thread.

7

It’s 2023 and this thread still shows up first in search…

1 Like
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
    }
9

still no solution? (padding didn’t work)