How to center text and images in Markdown

To center text or an image in Markdown, wrap it in an HTML block such as <p align="center"> or <div align="center">, because Markdown itself has no alignment syntax. This works on GitHub, where READMEs commonly use it for centered logos and titles. The align attribute is obsolete in HTML5, but GitHub keeps it while removing style attributes, so CSS such as text-align: center does not work there. The only built-in centering in Markdown is table column alignment with :---:.

Syntax quick reference

Key facts

• CommonMark and GitHub Flavored Markdown define no syntax for centering text or images.
• The common workaround is an HTML block with the align="center" attribute, on <p>, <div>, or a heading tag.
• GitHub keeps the align attribute when it renders Markdown but removes style attributes and drops the <center> tag.
• The align attribute and the <center> element are obsolete in HTML; MDN recommends the CSS text-align property instead.
• Markdown inside an HTML block is only processed when blank lines separate it from the opening and closing tags.
• Table alignment with :---: centers the cells of one column, not the table itself.

Why Markdown has no center syntax

Markdown describes structure, such as headings, lists, and emphasis, and leaves presentation to the renderer and its stylesheet. Neither CommonMark nor GitHub Flavored Markdown (GFM) defines a way to center a paragraph, a heading, or an image. Some guides suggest arrows such as ->text<-; that form comes from a few specific tools and shows as literal characters in CommonMark and GFM.

Because both specifications pass raw HTML through to the output, the usual answer is HTML. Which HTML works depends on the renderer: some allow CSS, some allow only a short list of attributes, and some escape HTML entirely. The sections below go from the most widely supported option to the least.

Center text with align="center"

For a single centered line or paragraph, use a <p> tag with align="center". On GitHub this is the most reliable form, because the sanitizer keeps the align attribute.

Centered paragraph

Markdown

<p align="center">This line is centered.</p>

This paragraph is left-aligned as usual.

Rendered output

HTML output

<p align="center">This line is centered.</p>
<p>This paragraph is left-aligned as usual.</p>

Markdown formatting such as **bold** is not converted when it sits on the same lines as the HTML block. Use <strong> inside the tag, or use the <div> pattern below.

To center Markdown content, wrap it in <div align="center"> and leave a blank line after the opening tag and before the closing tag. In CommonMark, an HTML block that starts with <div> ends at the first blank line, so the content after it is parsed as normal Markdown, and the closing </div> becomes its own HTML block.

Centered block with Markdown inside

Markdown

<div align="center">

## My Project

A **fast** tool for converting files.

</div>

Rendered output

HTML output

<div align="center">
<h2>My Project</h2>
<p>A <strong>fast</strong> tool for converting files.</p>
</div>

Without the blank lines, the heading and bold text stay as literal ## and ** characters inside the div.

Heading tags also accept the attribute directly, for example <h1 align="center">Title</h1>. GitHub keeps align on headings as well.

Center an image in a GitHub README

A centered logo at the top of a README is the most common reason people search for this. Markdown image syntax, ![alt](src), has no size or alignment options, so the usual pattern is an <img> tag inside a centered paragraph. The width attribute sets the size.

Centered logo

Markdown

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

Rendered output

HTML output

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

On GitHub, the rendered image is also wrapped in a link to the full-size file and given max-width: 100%, which GitHub adds itself.

You can keep Markdown image syntax by putting it inside a centered <div> with blank lines around it. Several images or badges on one line inside the block are centered together as one row.

Markdown image and badges inside a centered div

Markdown

<div align="center">

![Project logo](docs/logo.png)

[![Build](https://img.shields.io/badge/build-passing-green)](#) [![License](https://img.shields.io/badge/license-MIT-blue)](#)

</div>

Rendered output

HTML output

<div align="center">
<p><img src="docs/logo.png" alt="Project logo"></p>
<p><a href="#"><img src="https://img.shields.io/badge/build-passing-green" alt="Build"></a> <a href="#"><img src="https://img.shields.io/badge/license-MIT-blue" alt="License"></a></p>
</div>

Images can also take align="left" or align="right" to float beside text, which GitHub keeps. align="center" on the <img> tag itself is not a valid image alignment in HTML, so center the parent element instead. See Images for sizing and alt text.

The center tag and CSS text-align

The <center> element is obsolete. MDN lists it as deprecated since HTML 4 in favor of the CSS text-align property. Many browsers still render it, but GitHub removes the tag and leaves its text uncentered.

What GitHub does with center and style

Markdown

<center>Centered?</center>

<p style="text-align: center">Centered?</p>

Rendered output

HTML output

Centered?
<p>Centered?</p>

The HTML output shown is what GitHub produces: the <center> tag and the style attribute are both removed. A renderer that allows them would center both lines.

Where a renderer allows inline styles, style="text-align: center" is the standards-based option. That includes many static site generators, Pandoc HTML output, and note apps with permissive sanitizers. For a site you control, a CSS class in your stylesheet is cleaner than repeating inline styles.

<p style="text-align: center">Centered with CSS where styles are allowed.</p>

<img src="logo.png" alt="Logo" style="display: block; margin: 0 auto;">

The second line centers an image as a block with automatic left and right margins, the technique MDN recommends for centering block elements.

Center table columns with :---:

Tables are the one place where GFM has built-in alignment. In the delimiter row under the header, a colon on both sides of the dashes centers that column. A colon on the left aligns left, and a colon on the right aligns right.

Column alignment

Markdown

| Item   | Qty | Price |
| :----- | :-: | ----: |
| Pens   |  3  | 4.50  |
| Paper  | 10  | 12.00 |

Rendered output

HTML output

<table>
<thead>
<tr>
<th align="left">Item</th>
<th align="center">Qty</th>
<th align="right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Pens</td>
<td align="center">3</td>
<td align="right">4.50</td>
</tr>
<tr>
<td align="left">Paper</td>
<td align="center">10</td>
<td align="right">12.00</td>
</tr>
</tbody>
</table>

Alignment applies to every cell in the column, including the header. It does not center the table on the page, and it cannot center a single cell.

To center a whole table on GitHub, wrap it in <div align="center"> with blank lines around the table, the same way as other Markdown content. Whether the table itself moves depends on the page stylesheet, so check the result. More in Tables.

Flavor differences

Centering support is a question of which HTML each renderer keeps. The table summarizes documented behavior and what GitHub's renderer outputs; for other tools, test in the final destination.

Chat and forum tools such as Slack, Discord, and Reddit do not render raw HTML, so there is no way to center text there. For a broader comparison, see Markdown flavors and Inline HTML.

For the full comparison of how flavors differ across all elements, see Markdown flavors.

How Markdific renders it

Markdific renders standard Markdown and allowed HTML, including <div align="center"> and span with a style attribute, and GFM table column alignment. Scripts are removed, so check the preview for other tags. Try it in the Markdific online editor.

Common mistakes and gotchas

• Looking for a Markdown-only syntax. There is none in CommonMark or GFM. Forms like ->text<- show as literal characters on GitHub.
• Forgetting the blank lines inside a div. Without a blank line after <div align="center">, Markdown inside it stays as literal #, **, and ![]() text.
• Using style on GitHub. GitHub removes style attributes, so text-align: center has no effect there. Use align="center".
• Using the center tag. <center> is obsolete and GitHub drops it.
• Putting align="center" on the img tag. Center the parent <p> or <div> instead.
• Expecting :---: to center the table. It centers the cells of one column only.

Best practices

• For GitHub READMEs, use <p align="center"> for single items and <div align="center"> with blank lines for Markdown content.
• Center only the elements that benefit from it, such as a logo, title, or badge row, and keep body text left-aligned for readability.
• Always include alt text on centered images, and set width rather than relying on the image's native size.
• On sites you control, prefer a CSS class or text-align over the obsolete align attribute.
• Preview the document in the final destination, since each renderer keeps a different set of HTML attributes.

HTML equivalent

A centered README header usually combines a centered image and a centered heading. This is the HTML the Markdown passes through.

Markdown

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

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

HTML output

<p align="center">
  <img src="docs/logo.png" alt="Project logo" width="120">
</p>
<h1 align="center">My Project</h1>

FAQ

How do I center text in Markdown? Markdown has no center syntax, so use HTML: <p align="center">Your text</p>. On renderers that allow CSS, style="text-align: center" also works.

How do I center an image in a GitHub README? Wrap an image tag in a centered paragraph: <p align="center"><img src="logo.png" alt="Logo" width="120"></p>. GitHub keeps the align attribute.

Why does text-align: center not work on GitHub? GitHub sanitizes rendered Markdown and removes style attributes, so inline CSS has no effect. Use align="center" instead.

Does the center tag work in Markdown? Sometimes, but it is obsolete HTML. Browsers may still center it where it passes through, but GitHub removes the <center> tag, so the text is not centered there.

Is the align attribute deprecated? Yes. MDN lists align on <p> and <div> as obsolete in favor of CSS. It is still used in READMEs because GitHub keeps it and removes CSS.

How do I center a column in a Markdown table? Put a colon on both sides of the dashes in the delimiter row, for example | :---: |. This centers every cell in that column.

How do I center text in Obsidian? Use HTML such as <p align="center"> or <div style="text-align: center">. Obsidian does not render Markdown syntax inside HTML elements, so write the content as HTML or plain text, and check it in Reading view.

Sources and compatibility references

• CommonMark Spec 0.31.2: HTML blocks
• GitHub Flavored Markdown Spec: Tables (extension)
• GitHub Docs: Organizing information with tables
• GitHub REST API: Render a Markdown document (used to check GitHub's output)
• github/markup README: HTML sanitization
• MDN: <center> element (deprecated)
• MDN: <div> element, align attribute
• MDN: <p> element, align attribute
• Obsidian Help: HTML content

Use these primary references for syntax rules. Renderer behavior can still vary by version and configuration, so preview important documents in their final destination.

To see how your Markdown renders while you write, open the file in Markdific, a Markdown viewer and editor for Mac, Windows and Linux.

Related pages

• Markdown documentation hub
• Images
• Tables
• Inline HTML
• Text color
• Headings
• Markdown flavors
• Markdown cheat sheet