CSS Title left align

is there a way using css to left align the Title? I’ve tried a couple of things but have no success. I can get the footer to left align but not the title. I want to create a IOS inspired theme.

I’m sure someone can make cleaner… but just fooling around i got this… maybe u can modify… I think would need some more work on the styles if you want to change the colors for off and on. .but this worked for the alignment. I asked chatgpt and it gave some parameters (which didn’t quite do what I asked) and then I just modified the percentages.

.tile .title { position: absolute; top: 50%; left: 25%; transform: translateY(-50%); /* Adjust for exact vertical centering */
text-align: left;
font-size: 2.5em;}

.tile .icon {
display: flex; align-items: center; position: absolute;
top: 50%; left: 5%; transform: translateY(-50%);
}

.tile .icon svg {
width: 60%;
height: 60%;
color: orange;}

image

1 Like

Joseph, you might have inspired me a little bit… Hope you post what you get… but here’s what I started with (struggling w/ the oval background to icons still)

tile .title { position: absolute;  top: 45%;  left: 25%; transform: translateY(-65%); /* Adjust for exact vertical centering */
  text-align: left;
  font-size: 2.5em;}

.tile .tile-footer { 
font-size:1.5em;
position: absolute; top: 55%; left: -1%; transform: translate(-50%, -50%);}


.tile .icon svg {
  width: 70%;
  height: 70%;
color: orange;}

.tile .icon {
  display: flex;  align-items: center;  position: absolute;
  top: 50%;  left: 5%; transform: translateY(-50%); 
 background-color: rgba(128, 128, 128, 0.4); /* Semi-transparent grey */
  border-radius: 60%; /
  padding: 3px; /

.tile .tile-footer { position: absolute;  top:-15%;  left:-50%; transform:translateY(-5%);
  font-size: 1.5em;}

I’ll give it a shot tonight, here is what i got so far, i have the labels center, they look ok, i’d just prefer them to be left aligned. Thanks!

1 Like

So i guess the tittle doesn’t actually left align, it just moved the position. I tried it and one of my tiles looks great but the other with a longer tittle doesn’t.