Markdown : center image
Tags: markdown, webdev, beginners
Published: 2021-11-29 14:11:58



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.
> 
> <figcaption>— John Gruber, <cite>The Daring Fireball Company LLC</cite></figcaption>

> 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.
> 
> <figcaption>— John Gruber, <cite>The Daring Fireball Company LLC</cite></figcaption>

## Classic picture insertion thanks to markdown

This markdown code :
<pre>
![](https://res.cloudinary.com/bdavidxyz-com/image/upload/v1637503750/bootstrap/admin_crudZ3.png)
</pre>

Will produce the following output

<figure class="figure text-left">![](https://res.cloudinary.com/bdavidxyz-com/image/upload/v1637503750/bootstrap/admin_crudZ3.png)

<figcaption class="figure-caption">Screenshot from Bootiful (figcaption not part of the generated markdown alas).</figcaption>

</figure>

Whereas this markdown code :
<pre>
![A random screenshot](https://res.cloudinary.com/bdavidxyz-com/image/upload/v1637503750/bootstrap/admin_crudZ3.png)
</pre>

Will produce the following output

<figure class="figure text-left">![A random screenshot](https://res.cloudinary.com/bdavidxyz-com/image/upload/v1637503750/bootstrap/admin_crudZ3.png)

<figcaption class="figure-caption">Same screenshot as above (figcaption not part of the generated markdown alas).</figcaption>

</figure>

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 :

<pre>![<span class="hljs-string">Picture</span>](<span class="hljs-link">Picture.svg</span>){ width="800" height="600" style="display: block; margin: 0 auto" }
 <span class="hljs-code"></span></pre>

Could be rendered like this :

<pre><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"Picture.svg"</span> 
        <span class="hljs-attr">alt</span>=<span class="hljs-string">"Picture"</span> 
        <span class="hljs-attr">width</span>=<span class="hljs-string">"800"</span> 
        <span class="hljs-attr">height</span>=<span class="hljs-string">"600"</span> 
        <span class="hljs-attr">style</span>=<span class="hljs-string">"display: block; margin: 0 auto"</span> /></span></pre>

## 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.

<pre><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span>></span>
<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre>

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 :

<pre><span class="hljs-selector-tag">img</span> {
    <span class="hljs-attribute">display</span>: block;
    <span class="hljs-attribute">float</span>: none;
    <span class="hljs-attribute">margin-left</span>: auto;
    <span class="hljs-attribute">margin-right</span>: auto;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">50%</span>;
}</pre>

### 3.2 Target specific image with URL hash

<pre>![<span class="hljs-string">img</span>](<span class="hljs-link">/img/any.jpg#center</span>)
 <span class="hljs-code"></span></pre>

<pre><span class="hljs-selector-tag">img</span><span class="hljs-selector-attr">[src*=<span class="hljs-string">'#center'</span>]</span> {
    <span class="hljs-attribute">display</span>: block;
    <span class="hljs-attribute">margin</span>: auto;
}</pre>

## 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

*   [https://stackoverflow.com/a/12091563/2595513](https://stackoverflow.com/a/12091563/2595513)
*   [https://stackoverflow.com/a/62383408/2595513](https://stackoverflow.com/a/62383408/2595513)
*   [https://daringfireball.net/projects/markdown/syntax](https://daringfireball.net/projects/markdown/syntax)