CSS to Center ALL Images and Embeds?

Custom CSS & Theme Design
,
1

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.

2

This may help you work it out:

1 Like
3

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;
}
2 Likes
4

Thank you! This works really well, except for iframes…

For example, I got an embed like this:

<iframe src="https://clips.twitch.tv/embed?clip=InventiveFlirtyCrabsPanicVis-8N9Ilj4ngRzYuSux&parent=localhost" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

And it does not align to the center…

Can you please help me out? Much appreciated!

5

You could try using something like this:

iframe {
    margin-inline: auto;
    display: block;
}
1 Like
6

Yes! It works flawlessly, Thanks!