[CSS Snippet] Perfectly center Excalidraw embeds (solving the inline wrapper issue)

Share & showcase Themes & CSS snippets
1

Hi everyone,

I’ve noticed that centering Excalidraw embedded drawings (like .excalidraw.md files) can be frustrating. Applying a standard margin: auto; directly to the image often fails to move it.

The Root Cause Obsidian wraps embedded files in an .internal-embed container (usually a <span> or <div>). By default, this wrapper acts as an inline element. As long as the parent is inline, any block-level centering techniques applied to the child element will be ignored.

The Solution We can use the CSS :has() pseudo-class to explicitly target the parent .internal-embed wrapper—but only when it contains an Excalidraw drawing. This allows us to safely convert it to a block-level element without breaking the layout of other embeds like PDFs or YouTube frames.

Here is the code:

/* 1. Force the parent wrapper to act as a block element, but ONLY if it contains an Excalidraw embed */
span.internal-embed:has(div.excalidraw-embedded-img),
div.internal-embed:has(div.excalidraw-embedded-img) {
    display: block !important;
    width: 100% !important;
    text-align: center !important; 
}

/* 2. Center the actual Excalidraw container */
div.excalidraw-embedded-img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

How to apply:

  1. Go to Settings > Appearance > CSS snippets.

  2. Open your snippets folder and create a new file (e.g., center-excalidraw.css).

  3. Paste the code above and save.

  4. Click the refresh icon in Obsidian and toggle the snippet on.

I hope this saves someone a bit of debugging time!

1 Like