Center a heading
Put align="center" on a heading tag.
You write
<h2 align="center">A centered heading</h2>You see
A centered heading
Center an image
Wrap the image in a centered paragraph. This is how many GitHub READMEs put a logo at the top.
You write
<p align="center">
<img src="/icon-192.png" alt="MarkdownPaper logo" width="96">
</p>You see
Center several things at once
A div can hold a heading, text and images together. Leave empty lines inside
it to keep using Markdown.
You write
<div align="center">
**Project name**
A short line about the project.
</div>You see
Project name
A short line about the project.
Center a table column
Tables use colons for alignment. A colon on both sides of the dashes centers the column.
You write
| Name | Score |
| ---- | :---: |
| Ana | 18 |
| Ben | 21 |You see
| Name | Score |
|---|---|
| Ana | 18 |
| Ben | 21 |
Why not CSS?
style="text-align: center" is the modern way in HTML, but GitHub and many
Markdown apps remove style attributes. align is kept, so it is the one to
use in Markdown.
Where centering does not work
- Apps that do not allow HTML show the tags as text.
- Some apps allow HTML but ignore
align. - A whole document cannot be centered from inside it. The app reading the file decides the page layout.
Questions
How do I center text in a GitHub README?
Use <p align="center">Your text</p>. GitHub keeps the align attribute.
How do I center an image in Markdown?
Wrap it in <p align="center"> and use an <img> tag inside, as in the
example above.
Why is my centered text not centered?
The app may not allow HTML, or it may ignore align. Check that the tag is
on its own lines, with an empty line before and after it.
Next
- How to add an image in Markdown, including size and captions.
- Preview a README as a page before you publish it.