Center figure in imported rich text block

Hey, I have been struggling with this problem for a while now.

I am importing a rich text block into the cms. within that rich text block is a figure.

I add it like this

    html += "<figure>"
    html += f'<img src="{img_url}" alt="{caption}" style="vertical-align:middle">'
    html += f"<figcaption>{caption}</figcaption>"
    html += "</figure>"

I am trying to center this image on the collection template

I have tried adding the custom code to the head

.richtext-master figure.w-richtext-align-floatleft{ text-align: center; } .richtext-master figure.w-richtext-align-floatright{ text-align: center; } .w-richtext figure.w-richtext-align-floatright { margin-left: 0px; }

That didn’t fix it.

Am i missing something obvious?
Any help is appreciated!