CSS snippet don't work in live preview mode

Help
,
#1

I don’t know if my question is too silly, but I would like to know how to make a snippet work in live preview mode.

I’m trying to make this snippet I found on the internet, which centers images, work in live preview mode:

.centerImg img {
  display: block;
  margin: 0px auto;
}

In a note I put a code like this:

<span class='centerImg'>![[image.png|200]]</span>

But it only works in reading mode, otherwise the only thing I see is “![[image.png|200]]”.

#2

I noticed how to do that!

I deleted what was before in the snippet file and put the following:

/*Center Image*/
img:is([alt*="ctr"], [alt*="center"]),
.image-embed[src*="#ctr"] .image-embed[alt*=ctr],
.image-embed[src*="#center"] .image-embed[alt*=center],
.imgctr img {
display: block;
margin-left: auto;
margin-right: auto;
}

And in the note I put:

![[image.png|center|200]]