CSS text-align 속성

정의와 사용법

text-align 속성은 요소 내 텍스트의 수평 정렬 방식을 정의합니다。

이 속성은 행 상자와 어느 점에 맞추어 설정함으로써 블록 요소 내 텍스트의 수평 정렬 방식을 설정합니다. 행 내용의 글자와 글자 간 간격을 사용자代理가 조정할 수 있게 하여 justify 값을 지원할 수 있습니다; 다른 사용자代理는 다른 결과를 얻을 수 있습니다。

다른 참조물:

CSS 가이드:CSS 텍스트

HTML DOM 참조 가이드:textAlign 속성

예제

h1, h2, h3 요소의 텍스트 정렬 방식을 설정합니다：

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

직접 시험해 보세요

CSS 문법

text-align: left|right|center|justify|initial|inherit;

속성 값

값 설명
left 텍스트를 왼쪽에 정렬합니다. 기본 값: 브라우저에 의해 결정됩니다。
right 텍스트를 오른쪽에 정렬합니다.
center 텍스트를 가운데 정렬합니다.
justify 양쪽 정렬 텍스트 효과를 구현합니다.
inherit 부모 요소의 text-align 속성의 값을 继承

값 justify

마지막 수평 정렬 속성은 justify입니다. 이는 자신만의 문제를 가집니다.

값 justify는 텍스트의 양쪽을 정렬할 수 있습니다. 양쪽 정렬 텍스트에서, 텍스트 줄의 양쪽 끝이 부모 요소의 내 경계에 놓입니다. 그런 다음, 단어와 글자 간의 간격을 조정하여 각 줄의 길이가 같게 합니다. 양쪽 정렬 텍스트가 인쇄에서 매우 일반적이지만, CSS에서는 추가적인 고려가 필요합니다.

양쪽 정렬 텍스트가 부모 요소의 왼쪽과 오른쪽 경계 사이의 공간을 채우기 위해 어떻게 확장되는지 사용자代理(또는 CSS)가 결정해야 합니다. 예를 들어, 일부 브라우저는 단어 간에 추가적인 공간을 추가할 수 있으며, 다른 브라우저는 글자 간의 추가적인 공간을 평균적으로 분배할 수 있습니다(CSS 규범은 특히, 이 경우에만 추가적인 공간을 추가할 수 있습니다.). letter-spacing 속성길이 값을 지정하여, "사용자代理는 문자 간의 공간을 더 이상 증가하거나 감소할 수 없습니다"(사용자代理가 몇몇 줄의 공간을 줄이고 텍스트를 더 가깝게 만들 수 있는 경우도 있습니다). 이러한 모든 방법은 요소의 외관에 영향을 미치고, 심지어 높이도 바뀔 수 있습니다. 이는 사용자代理가 얼마나 많은 텍스트 줄에 정렬 선택을 적용했는지에 따라 달라집니다.

CSS도 연결 기호를 어떻게 처리해야 할지 명시하지 않습니다(주1). 대부분의 양쪽 정렬 텍스트는 긴 단어를 두 줄로 나누어 두 줄 간의 간격을 줄이고 텍스트 줄의 외관을 개선하기 위해 연결 기호를 사용합니다. 그러나 CSS가 연결 기호 행동을 정의하지 않기 때문에, 사용자代理가 자동으로 연결 기호를 추가할 가능성은 낮습니다. 따라서 CSS에서 양쪽 정렬 텍스트는 인쇄된 것보다 더 나쁘게 보일 수 있으며, 특히 요소가 너무 좁아서 줄당 단어가 몇 단어밖에 안 들어갈 때는 더 나쁩니다. 물론, 좁은 디자인 요소를 사용할 수 있지만, 이에 대한 단점에 주의해야 합니다.

주1:CSS는 다른 언어가 다른 연결 기호 규칙을 가지므로 연결 기호를 처리하는 방법에 대해 설명하지 않습니다. 규범은 이러한 불완전한 규칙을 조정하려는 시도를 하지 않고, 이 문제를 전혀 언급하지 않습니다.

기술 세부 사항

기본 값: direction 속성이 ltr 일 경우 기본 값은 left; direction가 rtl이면 right입니다.
thừa kế: yes
버전: CSS1
JavaScript 문법: object.style.textAlign="right"

추가 예제

텍스트 정렬
이 예제에서는 텍스트를 정렬하는 방법을 보여줍니다.

브라우저 지원

표의 숫자는 이 속성을 최초로 지원한 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5