실행 가능한 HTML 문서: 텍스트 가운데 정렬

Q: HTML에서 텍스트를 가운데 정렬하려면 어떻게 하나요?

텍스트를 담고 있는 요소에 text-align: center를 추가하세요. 예를 들어 나 h1 { text-align: center; } 같은 CSS 규칙이에요. 그 요소 안의 모든 텍스트 줄과 인라인 콘텐츠가 가운데로 정렬돼요.

Q: 텍스트를 세로로 가운데 정렬하려면 어떻게 하나요?

컨테이너를 flex 박스로 만드세요. display: flex; align-items: center;예요(가로로도 가운데 정렬하려면 justify-content: center 추가). 높이가 고정된 상자 안의 한 줄이라면 line-height를 높이와 같게 줘도 돼요.

Q: 태그를 아직 써도 되나요?

안 돼요. 와 align="center" 속성은 더 이상 쓰지 않아요. 옛 페이지를 위해 브라우저가 아직 렌더링하지만, 새 코드에서는 CSS의 text-align: center를 쓰세요.

Q: HTML에서 들여쓰기는 어떻게 하나요?

CSS를 쓰세요. text-indent: 2em은 문단 첫 줄을 들여 쓰고, padding-inline-start: 2em이나 margin-inline-start: 2em은 블록 전체를 들여 써요. 텍스트 안의 공백이나 는 믿을 만한 들여쓰기가 아니에요.

HTML에서 텍스트 가운데 정렬하는 법

텍스트를 담고 있는 요소에 CSS 속성 text-align: center를 쓰세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

text-align은 요소 안의 모든 줄을 가운데로 정렬하고, 링크, 이미지, 버튼 같은 인라인 요소도 포함해요. 상속되기 때문에 컨테이너에 지정하면 그 안의 모든 텍스트가 가운데로 정렬돼요.

span이 아니라 블록에 주세요

text-align은 <p>, <div>, 제목, 표 셀 같은 블록 컨테이너에서 동작해요. <span>이나 <a>에서는 아무 효과가 없어요. 인라인 요소는 텍스트만큼만 넓어서 가운데로 옮길 공간이 없기 때문이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

해결법은 언제나 같아요. text-align: center를 부모 블록으로 옮기세요.

블록은 가운데, 줄은 왼쪽 정렬

여러 줄짜리 문단을 전부 가운데 정렬하면 줄마다 시작 위치가 달라서 읽기 어려워요. 흔히 쓰는 패턴은 블록을 페이지 가운데에 두고, 텍스트는 시작 쪽에 맞추는 거예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto는 너비가 있는 블록을 가운데에 두고, text-align은 그 안의 줄을 가운데 정렬해요. 상자를 가운데에 두는 법(flexbox, grid, margin)은 div 가운데 정렬 페이지에서 다뤄요.

텍스트 세로 가운데 정렬

text-align은 가로 방향으로만 동작해요. 상자 안에서 텍스트를 세로로 가운데 정렬하려면 상자를 flex 컨테이너로 만드세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center는 세로로, justify-content: center는 가로로 가운데 정렬하고, 줄이 여러 개일 때는 text-align: center가 여전히 줄끼리 가운데로 맞춰요. line-height 방법은 높이를 아는 상자 안의 텍스트 한 줄에만 통해요.

text-align 값 전체

값	결과
`start`(기본값)	줄이 시작 쪽 가장자리에서 시작: 영어는 왼쪽, 아랍어와 히브리어는 오른쪽
`end`	줄이 끝 쪽 가장자리에서 끝남
`center`	줄이 가운데 정렬됨
`justify`	줄이 양쪽 가장자리에 닿도록 늘어남(마지막 줄 제외)
`left`, `right`	언어와 상관없이 항상 왼쪽 또는 오른쪽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

left와 right보다 start와 end를 쓰세요. 마지막 상자에서 보듯이 오른쪽에서 왼쪽으로 쓰는 언어에서는 자동으로 뒤집혀요.

옛날 center 태그

오래된 페이지는 <center>나 align 속성으로 텍스트를 가운데 정렬해요.

<center>Old way</center>
<p align="center">Also old</p>

둘 다 더 이상 쓰지 않아요. 옛 사이트가 깨지지 않도록 브라우저가 아직 렌더링하지만, 현재 HTML에서는 올바르지 않고 마크업에 레이아웃을 섞게 돼요. CSS의 text-align: center를 쓰세요.

텍스트 들여쓰기

HTML에는 들여쓰기 태그가 없고, 입력한 공백은 합쳐져요(HTML 공백 참고). 들여쓰기는 CSS로 해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

들여쓰기	CSS
첫 줄만	`text-indent: 2em`
블록 전체	`padding-inline-start: 2em` 또는 `margin-inline-start: 2em`
내어쓰기(첫 줄만 바깥으로)	`padding-inline-start: 2em; text-indent: -2em`

em은 들여쓰기를 글자 크기에 묶어 두기 때문에 텍스트와 함께 크기가 바뀌어요.

자주 하는 실수

인라인 요소에 text-align을 줌. 부모 블록에 주세요.
text-align이 상자를 가운데에 둘 거라고 기대함. 텍스트와 인라인 콘텐츠를 가운데 정렬할 뿐, 너비가 있는 블록은 아니에요. 상자에는 margin-inline: auto나 flexbox를 쓰세요.
<center>나 align="center"를 씀. 더 이상 쓰지 않아요. CSS를 쓰세요.
긴 문단을 가운데 정렬함. 제목과 짧은 줄만 가운데 정렬하고, 본문은 시작 쪽에 맞추세요.
 나 공백으로 들여씀. text-indent나 padding을 쓰세요.

자주 묻는 질문

HTML에서 텍스트를 가운데 정렬하려면 어떻게 하나요?

텍스트를 담고 있는 요소에 text-align: center를 추가하세요. 예를 들어 <p style="text-align: center">나 h1 { text-align: center; } 같은 CSS 규칙이에요. 그 요소 안의 모든 텍스트 줄과 인라인 콘텐츠가 가운데로 정렬돼요.

span에 text-align: center가 왜 안 되나요?

span은 인라인이라서 텍스트만큼만 넓고, 그 안에서 가운데로 옮길 공간이 없어요. 부모 블록(감싸고 있는 <p>나 <div>)에 text-align: center를 주거나, span을 display: block으로 만드세요.

텍스트를 세로로 가운데 정렬하려면 어떻게 하나요?

컨테이너를 flex 박스로 만드세요. display: flex; align-items: center;예요(가로로도 가운데 정렬하려면 justify-content: center 추가). 높이가 고정된 상자 안의 한 줄이라면 line-height를 높이와 같게 줘도 돼요.

<center> 태그를 아직 써도 되나요?

안 돼요. <center>와 align="center" 속성은 더 이상 쓰지 않아요. 옛 페이지를 위해 브라우저가 아직 렌더링하지만, 새 코드에서는 CSS의 text-align: center를 쓰세요.

HTML에서 들여쓰기는 어떻게 하나요?

CSS를 쓰세요. text-indent: 2em은 문단 첫 줄을 들여 쓰고, padding-inline-start: 2em이나 margin-inline-start: 2em은 블록 전체를 들여 써요. 텍스트 안의 공백이나  는 믿을 만한 들여쓰기가 아니에요.