How to center text in Markdown: HTML tags and divs

You want a title line set in the center of the page, and Markdown has no key for it. So you type a tag from memory and hope the output keeps it.

This post answers how to center text in Markdown. The output here is from one pass of pandoc on a Mac, version 3.8.3. It covers typed HTML tags, a div that wraps Markdown, and the pandoc extension fenced_divs. Each result names its test file so you can run it again. The output shown is HTML from pandoc; this post does not test how any viewer displays that HTML.

Center syntax in plain CommonMark

Version 0.31.2 of the CommonMark spec has no syntax for centering text. A grep of the spec file that ignores case found "text-align" on 0 lines. The word "align" came back 1, from a question about right-aligned list markers at spec line 206. The word "center" also came back 1: line 2235, where center sits in a list of HTML tag names (spec lines 2233 to 2246). As a control, "block quote" came back 57.

So the spec knows center only as an HTML tag name. The grep turned up no Markdown mark for it. The guide to the spec's core elements covers what the spec does define.

For lining up columns in a table, read the post about tables.

Raw HTML center tags in pandoc

Two typed tags were tested, one per file. The file center-p.md held a single line:

<p align="center">Jane Doe</p>

The file center-tag.md held a single line too:

<center>Jane Doe</center>

Neither file had any Markdown inside the tag, so this part tested only how the tags came through.

In the extension listing for this run, both the commonmark and markdown readers had +raw_html.

Given pandoc -f commonmark -t html center-p.md, pandoc returned the line unchanged: <p align="center">Jane Doe</p>. The markdown reader held on to the same tag and attribute, and put the open tag, the name and the close tag on three lines. The center-tag.md file went the same way. On that file, commonmark returned <center>Jane Doe</center> on one line, and markdown split it over three.

The tags passed through with their attributes. Pandoc added no style of its own. This test checked no viewer, so it shows only the HTML that pandoc wrote. To see what may happen to tags once they leave the file, read the guide to typed HTML tags.

A div with blank lines inside

The test file center-div.md held a typed div with a text-align style, with a bold name inside and blank lines around it:

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

Jane **Doe**

</div>

Both readers kept the div. Within it, both gave <p>Jane <strong>Doe</strong></p>, so the bold markers were parsed.

The file center-div-tight.md drops the two blank lines:

<div style="text-align: center">
Jane **Doe**
</div>

Both files used the same style and the same bold name; only the blank lines differed. Here the two readers split. On this file, commonmark handed back the three lines as they were, with Jane **Doe** left as typed text and no <strong> tag. The markdown reader parsed the bold anyway and wrapped <p>Jane <strong>Doe</strong></p> in the div.

For the rule behind the commonmark result, see the section on blank lines in the guide to typed HTML tags.

Fenced divs with a center style

Pandoc names its colon syntax fenced_divs. In the extension listing for this run, commonmark had -fenced_divs and markdown had +fenced_divs.

The test file center-fenced.md reads:

::: {style="text-align: center"}
Jane **Doe**
:::

Run it with this command:

pandoc -f markdown -t html center-fenced.md

What came back:

<div style="text-align: center">
<p>Jane <strong>Doe</strong></p>
</div>

Add the extension to the other reader's name and the output matches. Swap in pandoc -f commonmark+fenced_divs -t html center-fenced.md and pandoc produced those three lines too.

Leave the extension out, and the fence stays as text. Plain commonmark printed <p>::: {style="text-align: center"} Jane <strong>Doe</strong> :::</p>, one paragraph that still held the colons and braces. With markdown-fenced_divs, which turns the extension off for the markdown reader, pandoc also gave a single paragraph with the colons kept.

The style attribute in the output matched the one in the file. The post on callouts tests fences inside fences and other colon cases.

A center class instead of a style

The fence line can name a class rather than set a style. The test file center-fenced-class.md:

::: center
Jane **Doe**
:::

Under markdown, and also with commonmark+fenced_divs, the output was <div class="center"> around <p>Jane <strong>Doe</strong></p>. Plain commonmark printed <p>::: center Jane <strong>Doe</strong> :::</p>.

The output held the class name and no style attribute. This test supplied no style rule for the class, so the HTML carries only the name.

Center text with a fenced div

The steps here work with the markdown reader or commonmark+fenced_divs.

1. Choose a reader. Here, markdown came with fenced_divs switched on, and commonmark needed +fenced_divs on its name.
2. Open the fence with three colons and a style inside curly braces, for example ::: {style="text-align: center"}.
3. Write the text under the opening fence. Bold markers inside were parsed in this test.
4. Close the fence with a line of three colons.
5. Check for a div with grep. Here the count from pandoc -f markdown -t html center-fenced.md | grep -c '<div' was 1. With commonmark in place of markdown, the same pipe printed 0.
6. When the pipe prints 0, check the reader name for +fenced_divs first.

Where Sashmark fits

Sashmark's v1 plan calls for edits typed straight into the rendered page, plus a clean Round-Trip planned to keep the lines you left alone unchanged down to the byte. Next in that plan comes a Changes View, which is planned to point out what changed between your last read and now, with no git needed. It is in development and has not been released. The app itself has no AI features. See the planned features, the help pages and the roadmap for where each part stands.

Project news: sashmark.com.