Styling of a oh-label-card centering header text

Setup, Configuration and Use Beginners
1

Hello,

I am doing my first steps with the new UI and widget and tried to create a widget.

here is my YAML

uid: clock
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 6, 2023, 11:10:26 AM
component: oh-label-card
config:
  label: =dayjs(items.date_actualntpdatetime.state).format("hh:mm")
  title: =dayjs(items.date_actualntpdatetime.state).format("DD.MMMM YYYY")
  background: red
  text-align: center
  stylesheet: >
    .card-header {
      color: green;
      background: yellow;
      text-align: center;
      font-size: 20px;
    }

But the text title is not centered…
How do I center the title of the oh-card?

2

The title text is not text content within the card-header <div> but within it’s own <div> inside the card header. So instead of text-align you need to use justify-content to center the whole container that actually has the text.