So i have a widget with a clock in the header that i would like to center. Here is my current yaml
`
uid: widget_tablet_right_page
tags: []
props:
parameterGroups: []
timestamp: Oct 19, 2023, 10:55:49 AM
component: f7-card
config:
padding: true
class:
- mx-auto
slots:
content:
- component: f7-block
config:
visible: =items.System_State.state == "ON"
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: oh-image
config:
url: =items.ZMCameraFeed.state
visible: =items.Display_EMBY_Poster.state == "OFF"
width: 100%
- component: oh-image
config:
url: =items.EMBYPosterImage_URL.state
visible: =items.Display_EMBY_Poster.state == "ON"
width: 100%
- component: f7-row
config:
visible: =items.Display_EMBY_Poster.state == "ON"
slots:
default:
- component: f7-col
config:
width: 75
slots:
default:
- component: f7-progressbar
config:
color: green
infinite: false
progress: =Number.parseInt(items.EMBYPosterImage_Progressbar.state)
style:
--f7-progressbar-height: 10px
- component: f7-col
config:
width: 25
slots:
default:
- component: f7-chip
config:
mediaBgColor: green
text: =items.EMBYCurrentPlayingEndTime.displayState
slots:
media:
- component: f7-icon
config:
f7: film
header:
- component: oh-clock
config:
format: ddd M/d/YY h:mm A
I would like for the clock in the header to be centered horizontally, but right now it is left aligned?
Thanks