From 807e87fce0d720a8c96a570a9f345f5cfde81aab Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Fri, 28 Feb 2025 15:52:40 +0100
Subject: [PATCH] Use card text align variable for header text alignment
 (#24451)

Use card text align variable for header text aligment
---
 src/panels/lovelace/cards/hui-markdown-card.ts | 1 +
 src/panels/lovelace/views/hui-sections-view.ts | 1 -
 src/panels/lovelace/views/hui-view-header.ts   | 4 ++--
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index b1f2d71ca9..6d2e98e906 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -238,6 +238,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     ha-markdown {
       padding: 16px;
       word-wrap: break-word;
+      text-align: var(--card-text-align, inherit);
     }
     .with-header ha-markdown {
       padding: 0 16px 16px;
diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
index 45df6f7979..58d45edba8 100644
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -564,7 +564,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     hui-view-header {
       display: block;
-      text-align: center;
       padding: 0 var(--column-gap);
       padding-top: var(--row-gap);
       margin: auto;
diff --git a/src/panels/lovelace/views/hui-view-header.ts b/src/panels/lovelace/views/hui-view-header.ts
index 278e17f4bd..cf1e751a41 100644
--- a/src/panels/lovelace/views/hui-view-header.ts
+++ b/src/panels/lovelace/views/hui-view-header.ts
@@ -352,11 +352,11 @@ export class HuiViewHeader extends LitElement {
     }
 
     .layout .heading {
-      text-align: start;
+      --card-text-align: start;
     }
 
     .layout.center .heading {
-      text-align: center;
+      --card-text-align: center;
       display: flex;
       flex-direction: column;
       align-items: center;