How to align text?

Before -

After using -

export function text125_viewportEnter(event) {
    $w("#text125").html = `<h1 style = "color:red"> ${$w("#text125").text}</h1>`;
}

Result -

I just want to know how to align the text the back to its original position.

Please help!!

export function text125_viewportEnter(event) {
    $w("#text125").html = `<h1 style = "color:red; text-align:center"> ${$w("#text125").text}</h1>`;
}

I tried but it got lighten -


I have used exactly same piece of code.

I have found out the solution -

HTML is ultra case sensitive

Wrong -

export function text125_viewportEnter(event) {
    $w("#text125").html = `<h1 style = "color:red; text-align:center"> ${$w("#text125").text}</h1>`;
}

Right -

export function text125_viewportEnter(event) {
    $w("#text125").html = `<h1 style = color:red;text-align:center> ${$w("#text125").text}</h1>`;
}

You can observe that in the WRONG code there is space between ( ; & text-align:center) But in the RIGHT code there is no such space.

For more understanding a better use-

$w("#text0").html = `<h1 style = color:white;text-align:center;font-size:18px> ${$w("#text0").text}</h1>`;

You can see in this example I have used multiple things without spaces.