Markdown : center image

#markdown #webdev #beginners

The goal of this article is to help you to center an image in your markdown file, for example when you use a README.md file at the root of your open-source project, that browser will actually display as HTML.

Bad news first

Markdown doesn't allow you to tweak alignment directly.

In fact, it would be against the Markdown principles to allow such formatting, as stated in the "Philosophy" section.

A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.

— John Gruber, The Daring Fireball Company LLC

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags.

— John Gruber, The Daring Fireball Company LLC

Classic picture insertion thanks to markdown

This markdown code :

![](https://res.cloudinary.com/bdavidxyz-com/image/upload/v1637503750/bootstrap/admin_crudZ3.png)

Will produce the following output

Screenshot from Bootiful (figcaption not part of the generated markdown alas).

Whereas this markdown code :

![A random screenshot](https://res.cloudinary.com/bdavidxyz-com/image/upload/v1637503750/bootstrap/admin_crudZ3.png)

Will produce the following output

A random screenshot — Same screenshot as above (figcaption not part of the generated markdown alas).

Visually no difference, but screen readers can read what the image is about, thanks to the "alt" attribute added.

How to center the image with markdown

You can't do this by only relying on Markdown syntax. Markdown doesn't care about positioning.

So you will have to use something else, and now the good news is that Markdown, in theory, supports plain HTML. In other words, HTML can be considered as Markdown language.

Be aware that there is no guarantee the picture will actually be centered if the document isn't read through a browser (Visual Studio Web Essentials Markdown preview, Sublime Text Markdown preview, and so on).

Dependending on you environment, one of the following solution could work

Solution 1 : HTML attributes with Markdown

You add extra brackets to the Markdown, and it will be transformed into attributes :

![Picture](Picture.svg){ width="800" height="600" style="display: block; margin: 0 auto" }

Could be rendered like this :

<img src="Picture.svg" 
        alt="Picture" 
        width="800" 
        height="600" 
        style="display: block; margin: 0 auto" />

Solution 2 : use the "align" deprecated attribute

This is not recommended, but in some cases this is the only way to center the image. Insert this HTML snippet into your markdown file.

<p align="center">
    <img src="...">
p>

You can also try to put the "align" attribute directly into the "img" tag.

Solution 3 : centering image using CSS where you have control over CSS styles

3.1 Apply to all images

As long as CSS is not explicitly forbidden, you can try as follow :

img {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

3.2 Target specific image with URL hash

![img](/img/any.jpg#center)

img[src*='#center'] {
    display: block;
    margin: auto;
}

A few words about Markdown

For any markup that does not exist in the Markdown-defined syntax, you can just use HTML itself. There is no need to indicate or show that you’re switching from Markdown to HTML; you just use the usual tags. There is no order in which you can actually use the tag. You start either by Markdown, or HTML.

Note that Markdown formatting syntax will not be processed inside an HTML tag. For example, you can't use Markdown-style bold inside an HTML block.

Credits

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →