Markdown center

Markdown Center a Text, Image, Title, or Table

To start with the bad news, there’s no Markdown syntax to center text, images, titles, or tables. Luckily, most of the markdown parsers allow HTML to be inserted directly into the markdown document. Using HTML and a little bit of CSS styling, we can center almost anything.

Note that your mileage may vary. What you’re about to learn works almost anywhere where markdown is converted to HTML, though. If you’re unfamiliar with CSS, you can read the introduction of this CSS tutorial first. However, you don’t need to. You’ll get pretty far with just the examples provided in this article.

Markdown center text

Let’s start and center a piece of text. Most markdown parsers create an HTML paragraph of your text paragraphs, so let’s manually create a paragraph with the <p> .. </p> tags and add the text-align: center style attribute to it:

Here's some regular text.

<p style="text-align: center;">A piece of centered text</p>

And some more regular text.

The result should look like this:

Here’s some regular text.

A piece of centered text


And some more regular text.

A note on center tags and align attribute

Please note that some people use the <center> .. </center> tags or the align="center" attribute for this purpose. Try to avoid them, since these methods are deprecated (align attribute) or even obsolete (center tags). CSS should be used for styling and not HTML. Some browsers and markdown parsers might still support it, but chances are that support will be dropped soon. The above method, using the style attribute, should be used instead.

Markdown center image

Similar to text, we can center an image using HTML and CSS. There are actually two ways:

  1. Surround an image with <div>.. </div> tags that center it
  2. Center the image itself, by including the image with the <img> tag

Depending on your needs, you can choose either one. Here’s how to center an image by wrapping it inside div tags:

<div style="text-align: center;">

![alt text](https://markdown.land/wp-content/uploads/2021/06/markdown-512px.png "Our logo")

</div>

Alternatively, you can use the HTML <img> tag instead:

<img 
    style="display: block; 
           margin-left: auto;
           margin-right: auto;
           width: 30%;"
    src="https://markdown.land/wp-content/uploads/2021/06/markdown-512px.png" 
    alt="Our logo">
</img>

As you can see, this also gives us the option to set the width of the image. In this case, I set it at 30%, which is a relative width to the total width of the page. You can also use absolute values by supplying a number of pixes, like this: 480px

You can learn more about the HTML img tag here, if you like.

Markdown center titles and headers

If you read the above sections, you can probably guess how to center your markdown titles and headers using the style attribute. Here’s an example:

<h1 style="text-align: center;">Test</h1>
Some content

Markdown center a table

Finally, let’s look at how we can center a Markdown table. To start off: you can create tables using HTML inside your markdown document. But since you’re using markdown, you probably prefer markdown syntax instead. So I’ll show you how to wrap a table between <div>..</div> tags as we did above with an image, so you can build the table itself using markdown syntax.

Using divs with the style attribute

Please note that this method is not ideal, since in HTML we would apply the styling to the table directly. I noticed that wrapping a table in div tags doesn’t work everywhere. Most of the time, adding a width helps. You’ll have to experiment with this. Use this method if you already created your table, and don’t feel like converting it to HTML.

<div style="margin-left: auto;
            margin-right: auto;
            width: 30%">

| Item         | Price | # In stock |
|--------------|:-----:|-----------:|
| Juicy Apples |  1.99 |        739 |
| Bananas      |  1.89 |          6 |

</div>

Using the deprecated align attribute

Even though I just told you not to use it, the deprecated HTML attribute align=”center” works a lot better in this case. So if your tooling still supports it, you might want to use it anyway, despite its deprecation, and be done with it:

<div align="center">

| Item         | Price | # In stock |
|--------------|:-----:|-----------:|
| Juicy Apples |  1.99 |        739 |
| Bananas      |  1.89 |          6 |

</div>

It looks a lot cleaner too, as you can see.

Create an HTML table

Finally, you can create the table using regular HTML and apply the styling to it directly, which works a lot better than wrapping it in a div. Unfortunately, this defeats the purpose of markdown a little, since it requires a lot of HTML tags:

<table style="margin-left: auto; margin-right: auto;">
  <tr><th>Item</th>           <th>Price</th>      <th># In stock</th></tr>
  <tr><td>Juicy Apples</td>   <td>1.99</td>       <td>739</td></tr>
  <tr><td>Bananas</td>        <td>1.89</td>       <td>6</td></tr>
</table>

Go here to learn all about creating HTML tables.

More resources

  • Read this CSS tutorial to learn more about styling HTML inside your Markdown documents
  • Make sure to check out my Markdown cheat sheet.
  • If you need a reminder on how to create tables, center columns in tables, and more, read all about Markdown tables.