Lovelace Card Mod - Vertically Aligning Text

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'
        show_header: false
        control: false
        step_layout: row
        step_size: '0.5'
          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?


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?


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

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

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

1 Like

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
  style: |
    ha-card {
      height: 165px !important;
      padding: 15px

still no solution? (padding didn’t work)