How to center text in Markdown
Try it - edit the markdown and watch the preview
Visual
Markdown has no alignment syntax outside tables. To center anything you drop into HTML:
<p align="center">Centerd.</p>
Why the deprecated attribute is the right answer
align was deprecated in HTML 4 and replaced by CSS. It is still the method
that works, because the CSS version -
<p style="text-align: center">Centerd.</p>
- is stripped by GitHub’s sanitizer and by the preview on this page. A
styleattribute can carry things a sanitizer cannot safely inspect, so it goes.aligncannot, so it stays. Browsers have never dropped support.
Centring a block
<div align="center">
<b>Project name</b><br>
one line of description
</div>
Everything inside the <div> centers. Leave a blank line before and after the
block so Markdown around it still parses normally.
Centring an image
The Markdown image syntax has nowhere to put an alignment, so the image goes inside the HTML:
<p align="center">
<img src="logo.png" alt="Project logo" width="240">
</p>
This is why almost every README with a centerd logo has HTML at the top.
In tables, no HTML needed
Colons in the separator row set each column:
| Left | Centerd | Right |
| :--- | :-----: | ----: |
:--- left, :---: center, ---: right. This aligns the contents of the
column, not the table on the page.
Where it stops working
align needs a renderer that allows HTML. In a commit message, a plain-text
email, or a client running Markdown with HTML disabled, the tag shows up as
characters and nothing moves. There is no fallback that centers: use a heading
or a rule to set the line apart instead.
Common questions
- How do I center text in Markdown?
- With HTML - `<p align="center">text</p>` or `<div align="center">`. There is no Markdown syntax for alignment outside tables, and no flavour has added one.
- Does align="center" work on GitHub?
- Yes. The attribute is deprecated in HTML5 but GitHub's sanitizer allows it and browsers still honour it, which makes it the one method that reliably works in a README. The modern equivalent, a `style` attribute, is stripped.
- How do I center an image?
- Wrap it - `<p align="center"><img src="logo.png" alt="Logo" width="200"></p>`. The Markdown image syntax cannot be centerd on its own, so the image goes inside the HTML rather than beside it.
- Can I center a whole table?
- Not with the align attribute, which centers the text inside a block rather than the block itself. Column contents are centerd with colons in the separator row - `:---:` - and centring the table as a whole needs CSS you control.
- What if HTML is not allowed?
- Then nothing will center. Renderers running in strict no-HTML mode, plain-text email and most chat clients all ignore the tags and show them as characters. In those contexts, use a heading or a horizontal rule to set a line apart instead.
Sources
- CommonMark spec: raw HTML
- MDN: the div elementthe align attribute