Skip to main content
Brimham Rocks, Yorkshire, UK

Styling images in Astro content markdown files

This is a new website and is under active development. There will be some odd-looking layouts and colours while this is happening. Please bear with me and check back again to see any updates.
Note
Thanks are given to Goetz Buerkle for documenting this workaround.

How to control image positioning and alignment with Markdown in Astro

This is an easy, if hacky workaround.

Simply wrap the image link in <span></span> HTML tags. You can add classes and manual styles to the span.

I’ve used CSS styles like this:

span.imgright {
display:block;
float: right;
border:1px solid silver;
margin:.3rem;
padding:0;
}

To float an image to the right of the page, allowing the text to wrap around it.

<span class="imgright">![copilot vscode editor prompt](./copilot-ctrl-i.png)</span>

Obviously, this could be used with other block types as well.

Tip
The <span> tag appears to be allowed in Astro’s Markdown, you cannot use <div>.