CSS to Center ALL Images and Embeds?

What I’m trying to do

I am trying to have a single CSS Snippet that will automatically centre all images and Embeds (Youtube, and everything else, including iframe embeds).

The centring will ideally occur in both Reading and Live Preview Mode.

I am aiming to achieve this entirely using CSS and no plugins.

Things I have tried

I have tried various snippets from across the forum/internet, but none give this exact result.

This may help you work it out:

1 Like

I had this kicking around from when I was trying to get external images, ![](https://www.... .png), centered in Live Preview without putting a space at the beginning of a line. I added a few more sections to hopefully cover everything, and the !important is required here.

:is(:is(.markdown-source-view.mod-cm6) :is(.cm-content, .cm-line), .markdown-rendered) 
:is(img, .external-embed, .internal-embed audio, .internal-embed video, .iframe-external-embed) {
    margin-inline: auto !important;
    display: block;
}
1 Like