MDUtil

Markdownで文字と画像を中央寄せにする

Markdownには配置の記法がないため、中央寄せはHTMLで書きます：<p align="center">文字</p>。文字、画像、見出しの中央寄せと、Markdownが自分で配置を変えられる唯一の場所である表の列を説明します。

要点

Markdownで文字を中央寄せにするには？

align="center" を付けたHTMLのタグで囲みます：<p align="center">中央の文字</p>。GitHubは align 属性を残し style を取り除くため、この書き方がGitHubで使えます。スタイルが使える環境では style="text-align: center" も使えます。

Markdown
<p align="center">この行は中央に表示されます。</p>

表示結果

この行は中央に表示されます。

中央寄せと配置の例

どの例も align 属性を使っており、GitHubや多くのMarkdownプレビューで使えます。

画像の中央寄せ

画像を中央寄せの段落に入れます。<img> タグを使うと幅も指定できます。

Markdown
<p align="center">
  <img src="/samples/landscape.svg" alt="青空の下の緑の丘" width="240">
</p>

表示結果

青空の下の緑の丘

見出しの中央寄せ

見出しにも同じ属性が使えます。多くのREADMEの冒頭はこの書き方です。

Markdown
<h1 align="center">プロジェクト名</h1>
<p align="center">プロジェクトを1行で説明します。</p>

表示結果

プロジェクト名

プロジェクトを1行で説明します。

中央寄せの中でMarkdownを使う

Markdownを <div align="center"> で囲み、中に空行を入れると、Markdownが解釈されます。

Markdown
<div align="center">

ここでも**太字**、`コード`、[リンク](https://example.com)が使えます。

</div>

表示結果

ここでも太字、コード、リンクが使えます。

右寄せ

align="right" も同じように使え、署名や日付に向いています。

Markdown
<p align="right">編集部　2026年10月</p>

表示結果

編集部　2026年10月

表の列の中央寄せ

表はMarkdownが自分で配置を変えられる唯一の場所で、ハイフンの行のコロンで列を中央寄せにできます。

Markdown
| 名前 | 点数 |
| --- | :---: |
| 田中 | 92 |
| 鈴木 | 87 |

表示結果

名前点数
田中92
鈴木87

バッジを中央に並べる

中央寄せの段落に入れた複数の画像やリンクは、まとめて中央に並びます。

Markdown
<p align="center">
  <img src="/samples/badge.svg" alt="ドキュメントの状態">
  <img src="/samples/badge.svg" alt="ドキュメントの状態">
</p>

表示結果

ドキュメントの状態 ドキュメントの状態

各サービスでの対応状況

どの属性が使えるかは、アプリがどこまでHTMLを残すかで決まります。

サービス対応補足
GitHub / GitLab違いありalign="center" が使え、style 属性は取り除かれます。
VS Code / Typora対応プレビューで align と style の両方が使えます。
Obsidian対応閲覧画面で align と style の両方が使えます。
Notion非対応文字は中央寄せにできず、画像はメニューから配置を変えられます。
Discord / Slack非対応配置の機能はなく、文字は常に左から始まります。

よくある質問

Markdownに中央寄せの記法はありますか？

ありません。表の列を除き、CommonMarkとGitHub Flavored Markdownには配置の記法がないため、使える環境ではHTMLを使います。

GitHubで画像を中央寄せにするには？

中央寄せの段落に入れます：<p align="center"><img src="image.png" alt="…" width="300"></p>。

GitHubで style="text-align: center" が効かないのはなぜですか？

GitHubは安全のため style 属性を取り除きます。GitHubが残す align 属性を使います。

中央寄せの <div> の中のMarkdownがそのまま表示されるのはなぜですか？

<div align="center"> のあとと </div> の前に空行を入れます。空行がないと、内容はHTMLの一部として扱われます。

<center> タグは使えますか？

ブラウザはまだ表示しますが、廃止されたHTMLで、取り除くサイトもあります。align="center" のほうが確実です。

READMEの冒頭全体を中央寄せにするには？

<img> で書いたロゴ、見出し、バッジを1つの <div align="center"> で囲みます。Markdownを混ぜる場合は中に空行を入れます。