How to Center Text in Markdown

Method 1: The align Attribute

The align attribute is deprecated HTML, but it is the most portable way to center content in Markdown. GitHub allows it on div, p, h1–h6, img, td, and th.

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

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

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

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

Keeping Markdown Alive Inside the Block

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

<div align="center">

## Project Name

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

</div>

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.

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

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

This block is centered too.

</div>

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.

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

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.

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

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

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.

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

<div align="center">

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

</div>

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.

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

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

Common Mistakes

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

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

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

<center>Centered text</center>

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

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

<div align="center">

**This renders as bold**

</div>

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

<div align="center">

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

</div>

Quick Reference

Platform Support

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

Frequently Asked Questions