마크다운에는 정렬 문법이 없습니다
글이나 이미지를 가운데로 정렬하는 마크다운 문법은 없습니다. 마크다운이 구조만 다루고 배치는 렌더러에 맡기는 설계이기 때문입니다. HTML로 처리해야 합니다.
예외가 딱 하나 있는데, 표의 열 정렬입니다. 이건 아래에서 따로 다루겠습니다.
<div align> / <p align> 사용
가장 호환성이 좋은 방법은 align 속성입니다.
<div align="center">
가운데 정렬된 내용입니다.
</div>
align 값으로 center, left, right를 쓸 수 있습니다. 제목을 가운데 두고 싶을 때도 같은 방식입니다.
<h2 align="center">프로젝트 이름</h2>
참고로 align 속성은 HTML5 표준에서는 폐기(deprecated)된 문법입니다. 원래대로라면 CSS로 해야 하는 일인데, 브라우저가 하위 호환을 위해 계속 렌더해주고 있습니다. 그리고 바로 그 점 때문에 GitHub처럼 CSS를 막는 환경에서 유일하게 남은 수단이 됐습니다.
⚠️ GitHub에서 되는 것 / 안 되는 것
GitHub은 style 속성을 제거하므로, CSS 방식(style="text-align:center")은 작동하지 않습니다. 반면 align 속성은 허용되어 정상 동작합니다.
<!-- GitHub에서 작동 O -->
<p align="center">가운데</p>
<!-- GitHub에서 작동 X (style 제거됨) -->
<p style="text-align:center">가운데</p>
글자 색이 GitHub에서 안 먹는 것과 정확히 같은 이유입니다. style에 담긴 건 전부 사라지고, 속성으로 지정한 건 남습니다.
⚠️ 정렬 블록 안에서 마크다운이 죽습니다
이게 가장 자주 걸리는데 원인을 찾기 어려운 문제입니다.
<div align="center">
**굵게 나와야 할 텍스트**
</div>
이렇게 쓰면 굵어지지 않고 **굵게 나와야 할 텍스트**가 별표까지 그대로 보입니다. 마크다운 렌더러가 HTML 블록을 만나면 "여기서부터는 HTML이니 마크다운 해석을 멈춘다"고 판단하기 때문입니다.
해결은 태그와 내용 사이에 빈 줄을 넣는 것입니다.
<div align="center">
**굵게 나옵니다**
</div>
빈 줄이 나오면 렌더러가 "HTML 블록이 끝났다"고 보고 다시 마크다운 해석을 시작합니다. 접기(details)에서 빈 줄이 필요한 것과 완전히 같은 원리입니다.
다만 주의할 점이 있습니다. 빈 줄을 넣으면 <div align="center">의 정렬이 안쪽 문단에 적용되지 않는 렌더러도 있습니다. 마크다운이 안쪽 내용을 별도의 <p>로 감싸면서 정렬 맥락이 끊기는 경우입니다.
그래서 실무에서는 이렇게 나눠 쓰는 편이 안전합니다.
- 마크다운 서식이 필요 없다 → 빈 줄 없이 HTML만 (
<p align="center">텍스트</p>) - 서식이 필요하다 → 마크다운 대신 HTML 태그로 (
<p align="center"><b>텍스트</b></p>)
즉 정렬 블록 안에서는 처음부터 HTML로 통일하는 게 결과가 예측 가능합니다.
이미지 가운데 정렬
이미지는 가운데 정렬 요청이 가장 많은 대상입니다. 정렬된 <p>로 감싸면 됩니다.
<p align="center">
<img src="logo.png" alt="로고" width="200">
</p>
이미지 크기 지정과 함께 쓰는 조합이고, alt를 빠뜨리지 않는 것도 잊지 마세요.
README 배지 한 줄로 가운데 모으기
오픈소스 README에서 자주 쓰는 패턴입니다. 배지를 한 줄에 나란히 적으면 가운데로 모입니다.
<p align="center">
<img src="https://img.shields.io/badge/license-MIT-blue">
<img src="https://img.shields.io/badge/build-passing-green">
</p>
여기서 배지 사이에 줄바꿈을 넣어도 결과는 한 줄입니다. 마크다운에서 엔터 한 번은 줄바꿈이 아니기 때문입니다. 배지를 두 줄로 나누고 싶다면 사이에 <br>을 넣으세요.
표의 열 정렬 — 유일한 마크다운 문법
마크다운이 정렬을 직접 지원하는 곳이 딱 하나 있습니다. 표의 구분 행에 콜론(:)을 붙이는 방식입니다.
| 왼쪽 | 가운데 | 오른쪽 |
|:-----|:------:|-------:|
| 내용 | 내용 | 내용 |
:---— 왼쪽 정렬:---:— 가운데 정렬---:— 오른쪽 정렬
숫자 열은 오른쪽 정렬하면 자릿수가 맞아 훨씬 읽기 좋습니다. 이건 표 문법의 일부라 GitHub을 비롯해 표를 지원하는 곳이면 대체로 동작합니다. 자세한 내용은 표 작성 가이드에 있습니다.
플랫폼별 지원
| 플랫폼 | <p align="center"> |
표 열 정렬 |
|---|---|---|
| GitHub | 동작 | 동작 |
| 벨로그 | 동작 | 동작 |
| 티스토리 | 동작 | 동작 |
| 노션 | 안 됨 (HTML 미지원) | 표 블록에서 직접 설정 |
| Slack·Discord | 안 됨 | 표 자체가 없음 |
노션은 HTML을 받지 않으므로 태그가 글자 그대로 노출됩니다. 노션에서는 블록을 선택해 정렬을 지정하는 방식을 쓰세요.
가운데 정렬을 남용하지 마세요
마지막으로 하나. 긴 본문을 가운데 정렬하면 읽기 어려워집니다. 줄이 바뀔 때마다 시작 위치가 달라져서 눈이 다음 줄 첫 글자를 매번 새로 찾아야 하기 때문입니다.
가운데 정렬이 어울리는 건 짧고 독립적인 요소입니다.
- 문서 맨 위의 제목·로고·배지
- 이미지와 그 설명 한 줄
- 표지 성격의 짧은 문구
본문 문단은 왼쪽 정렬이 기본이고, 그게 읽기 가장 편합니다.
정리하면, 정렬은 HTML align 속성으로 하고 GitHub에서는 style이 아니라 align을 써야 합니다. 정렬 블록 안에서 마크다운이 안 먹는다면 빈 줄 문제이거나, 애초에 HTML 태그로 통일해야 할 상황입니다.