CSS to Center ALL Images and Embeds?

[TariqMK]

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.

[CawlinTeffid]

This may help you work it out:

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

[ariehen]

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;
}

[taikobo]

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!

[ariehen]

You could try using something like this:

iframe {
    margin-inline: auto;
    display: block;
}

[taikobo]

Yes! It works flawlessly, Thanks!