How to Center Text in Markdown

Markdown has no centering syntax, so you drop in a little HTML. This guide covers the one method that survives GitHub's sanitizer, the CSS method for renderers you control, and how to center headings, images, badges, and tables.

Short answer

Wrap the content in <div align="center">. It works on GitHub, GitLab, PyPI, VS Code, Obsidian, and most static site generators. Inline CSS like style="text-align: center" is stripped by GitHub, and <center> is removed entirely.

Jump to Section

The align Attribute Markdown Inside a Block Inline CSS The <center> Tag Images & Badges Tables Right & Left Align Common Mistakes Quick Reference Platform Support FAQ

Method 1: The align Attribute

The align attribute is deprecated HTML, but it is the most portable way to center content in Markdown. GitHub keeps it on every tag it allows; for centering, the ones that matter are div, p, and h1–h6. On img it means something else (see images).

Centered text

<div align="center">This text is centered.</div>

<p align="center">So is this paragraph.</p>

Preview

This text is centered.

So is this paragraph.

Centered README header

<h1 align="center">Project Name</h1>

<p align="center">A one-line description that sits under the title.</p>

Why a deprecated attribute? GitHub's Markdown pipeline sanitizes HTML and removes anything that could restyle the page: every style and class attribute is deleted, and id values are rewritten with a user-content- prefix. The align attribute stayed on the allowlist, which makes it the only alignment tool that works there.

Keeping Markdown Alive Inside the Block

Markdown is not parsed inside a raw HTML block. Add a blank line after the opening tag: in CommonMark and GFM a blank line ends the HTML block, so headings, bold, links, and tables after it are parsed normally. A blank line before the closing tag is optional but harmless. This is the pattern behind almost every centered README header.

Blank lines keep Markdown working

<div align="center">

## Project Name

**Everything in this block is still Markdown.**

</div>

Preview

Project Name

Everything in this block is still Markdown.

Without the blank lines you get literal **asterisks** and a line starting with a stray # instead of a heading.

Not in Obsidian. Obsidian never renders Markdown inside HTML, and a blank line inside an HTML block breaks the block apart. Center with HTML all the way through instead: <h2 align="center">Project Name</h2>.

Method 2: Inline CSS

If you control the renderer — a static site generator, a docs platform, a Jupyter notebook, a local preview — inline CSS is the modern, non-deprecated option. It is also the only way to combine alignment with other styling in one tag.

text-align with inline CSS

<p style="text-align: center;">Centered with inline CSS.</p>

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

This block is centered too.

</div>

Preview (CSS allowed)

Centered with inline CSS.

This block is centered too.

Do not use this in a GitHub, GitLab, or PyPI README. The markup renders, the style attribute is removed, and your text quietly stays left-aligned with no warning and no error. In MDX (Docusaurus, Next.js) the string form fails outright; write style={{ textAlign: "center" }} instead.

Method 3: The <center> Tag (Avoid)

The <center> tag is the method most tutorials still recommend. It is obsolete in the HTML standard, and GitHub removes it because it is not on the allowlist of permitted tags. Browsers do still render it in plain HTML, so it works in a local preview and then fails where it matters.

Works locally, disappears on GitHub

<center>This text is centered.</center>

Swap it for <div align="center">. Same result, no obsolete markup, and it survives sanitization.

Centering Images and Badge Rows

Markdown image syntax has nowhere to put an alignment hint, so wrap the image in an aligned paragraph. The same wrapper centers a row of shields.io badges, which is why nearly every polished README opens with one. Putting align="center" on the <img> itself does not work: on an image, the HTML spec treats it as vertical alignment, not horizontal centering.

Centered image with a fixed width

<p align="center">
  <img src="logo.png" alt="Project logo" width="240" />
</p>

Centered badge row

<p align="center">
  <img src="https://img.shields.io/badge/build-passing-brightgreen" alt="Build status" />
  <img src="https://img.shields.io/badge/license-MIT-blue" alt="License" />
  <img src="https://img.shields.io/badge/version-1.0.0-orange" alt="Version" />
</p>

Keep the alt text. Switching from ![alt](src) to an <img> tag is the most common place alt text gets dropped. See the image syntax guide for sizing and alt-text rules.

Centering a Table vs Centering a Column

These are two different things and they get mixed up constantly. Colons in the separator row set the alignment of the text inside a column. To move the whole table to the middle of the page, wrap it in an aligned block with blank lines around the Markdown.

Column alignment with colons

| Left | Center | Right |
| :--- | :----: | ----: |
| a    | b      | c     |
| dd   | ee     | ff    |

Preview

Left	Center	Right
a	b	c
dd	ee	ff

Centering the whole table

<div align="center">

| Plan  | Price | Seats |
| ----- | ----- | ----- |
| Free  | $0    | 1     |
| Team  | $12   | 10    |

</div>

Preview

Plan	Price	Seats
Free	$0	1
Team	$12	10

Right and Left Alignment

Everything above works with align="right" and align="left" too. Right alignment is most useful for attribution lines, signatures, and last-updated notes. On an image, <img align="right"> floats it to the right so the following text wraps around it, and GitHub keeps that too.

Right-aligned content

<div align="right">Right-aligned block.</div>

<p align="right"><em>- Attribution line</em></p>

Preview

Right-aligned block.

- Attribution line

Common Mistakes

Alignment problems are almost always a sanitizer stripping your markup or a raw HTML block swallowing your Markdown.

Broken

<div style="text-align: center;">
Centered on my machine, left-aligned on GitHub.
</div>

Fixed

<div align="center">
Centered everywhere, including GitHub.
</div>

GitHub's HTML sanitizer strips every style attribute, so inline CSS silently does nothing in a README. The deprecated align attribute is on the allowlist and is the only method that survives.

Broken

<center>Centered text</center>

Fixed

<div align="center">Centered text</div>

The <center> tag is obsolete and is not in GitHub's allowlist of permitted tags, so the whole tag is removed. Browsers still honor it in plain HTML, but do not rely on it in Markdown.

Broken

<div align="center">
**This stays literal asterisks**
</div>

Fixed

<div align="center">

**This renders as bold**

</div>

Markdown inside a raw HTML block is not parsed. A blank line after the opening tag ends the HTML block so the parser drops back into Markdown; the blank line before the closing tag is optional but keeps it readable. Obsidian is the exception: it never parses Markdown inside HTML.

Broken

| Left | Center |
| :--- | :----: |
| a    | b      |

Fixed

<div align="center">

| Left | Center |
| :--- | :----: |
| a    | b      |

</div>

Colons in the separator row center the text inside a column. They do not center the table itself on the page - for that you need to wrap the table in an aligned HTML block.

Quick Reference

Centering syntax quick reference and whether each works on GitHub
Syntax	Result	Works on GitHub?
<div align="center">	Centered block	Yes
<p align="center">	Centered paragraph	Yes
<h1 align="center">	Centered heading	Yes
<p align="center"><img ...></p>	Centered image	Yes
<img align="right" ...>	Image floated right	Yes
<div align="right">	Right-aligned block	Yes
<p style="text-align: center">	Centered paragraph	No - style stripped
<img align="center" ...>	Vertical alignment only	Not centered
<center>	Centered block	No - tag removed
\| :---: \|	Centered column text	Yes (column only)

Platform Support

Alignment depends entirely on how much HTML the renderer lets through. Document platforms allow some. Chat apps allow none.

Text centering support by platform
Platform	Supported?	Notes
GitHub	Partial	align="center" works on div, p, and h1-h6 (and td/th). Every style attribute and the <center> tag are stripped.
GitLab	Partial	Same picture as GitHub: the align attribute is allowed, inline CSS is sanitized away (except text-align on table cells).
PyPI	Partial	readme_renderer allows align on div, p, h1-h6, img, th, and td. No style attribute, no <center>.
VS Code preview	Yes	Renders both the align attribute and inline CSS in the built-in preview.
Obsidian	Partial	align and inline CSS render, but Obsidian never parses Markdown inside HTML and a blank line ends the HTML block, so the blank-line pattern breaks. Put HTML inside: <h2 align="center">Title</h2>.
Jupyter / R Markdown	Yes	Inline CSS and the align attribute both render in notebook and knitted HTML output.
VitePress / Astro / Jekyll / MkDocs	Yes	Raw HTML passes straight through, so both methods work.
MDX (Docusaurus, Next.js)	Partial	align="center" works as written. Inline CSS must be a JSX object: style={{ textAlign: "center" }}. The string form fails.
Hugo	Partial	Raw HTML is dropped by default. Set markup.goldmark.renderer.unsafe = true, then both methods work.
Notion	No	Notion has no text alignment option at all. Workarounds: columns, or a block equation with \text{}, which Notion centers.
Discord	No	No HTML and no alignment syntax. Messages are always left-aligned.
Slack	No	mrkdwn has no HTML and no alignment. Even Block Kit has no text-align option.
Reddit	No	HTML is stripped in both old and new Reddit. There is no centering workaround.
CommonMark	Partial	The spec defines no alignment syntax. Raw HTML passes through if the renderer allows it.

Frequently Asked Questions

How do you center text in Markdown?

Markdown itself has no centering syntax, so you embed a small piece of HTML. Wrap the content in <div align="center"> or <p align="center"> for the widest compatibility, including GitHub, GitLab, and PyPI. In renderers that allow inline CSS, <p style="text-align: center;"> also works.

Why does text-align: center not work on GitHub?

GitHub sanitizes the HTML in Markdown files and removes anything that could restyle the page: every style attribute and every class name (IDs are kept but rewritten with a user-content- prefix). Your markup renders, but the style attribute is gone, so the text stays left-aligned. Use the align attribute instead.

Does the <center> tag work in Markdown?

It depends on the renderer. <center> is obsolete in HTML, and GitHub does not include it in its allowlist of permitted tags, so it is removed entirely. Local previews and some static site generators still render it. Use <div align="center"> instead so the result is the same everywhere.

How do I center an image in a README?

Wrap the image in an aligned paragraph: <p align="center"><img src="logo.png" alt="Logo" width="240" /></p>. Do not put align="center" on the img itself: on an image, align sets vertical alignment or floating, and the HTML spec maps "center" to vertical middle, not horizontal centering.

How do I center a title or heading in Markdown?

Replace the # syntax with the HTML equivalent and add the attribute: <h1 align="center">Project Name</h1>. On GitHub an HTML heading still gets an anchor link, so table-of-contents links to it keep working. If you would rather keep the # syntax, wrap it: <div align="center">, a blank line, # Project Name, a blank line, </div>.

How do I center a table in Markdown?

Wrap the Markdown table in <div align="center"> with a blank line before and after the table so the pipe syntax is still parsed as Markdown. The colons in a table separator row (:---: ) only center the text inside a column; they do not move the table on the page.

Why is my bold text showing literal asterisks inside a centered div?

Markdown is not parsed inside a raw HTML block. Put a blank line after the opening tag and another before the closing tag. The blank line ends the HTML block, so everything between the tags is parsed as Markdown again.

How do I right-align text in Markdown?

Use the same approach with a different value: <div align="right"> or <p align="right">. This is handy for attribution lines and signature blocks. On an image, <img align="right"> floats it to the right with the text wrapping around it, which GitHub also allows.

Can I center text in Discord, Slack, or Reddit?

No. All three strip HTML and none of them expose a text-alignment option, so messages are always left-aligned. Padding a line with spaces or non-breaking spaces is unreliable because it depends on the reader's window width and font.