정의 및 사용 방법

text-align 속성은
블록 컨테이너와 테이블 셀 요소 내부의 텍스트와 인라인 콘텐츠의 가로 정렬을 설정하는 속성입니다.

이러한 특징을 이용하면 텍스트의 가로 정렬을 쉽게 설정할 수 있습니다.

기본 예제

CSS 라이브 데모: text-align 데모 버튼을 클릭해 보세요!

text-align 속성은 텍스트의 가로 정렬을 설정하지만, vertical-align 속성은 수직 정렬을 설정합니다.

형식 구문

CSS 
selector {
    text-align: left | right | start | end | center | justify
}

값

text-align 속성의 값
left 인라인 콘텐츠가 줄 상자의 왼쪽 가장자리에 맞추어집니다. (세로 쓰기 모드에서는 writing-mode 설정에 따라 물리적으로 위쪽 또는 아래쪽이 될 수 있습니다.)
right 인라인 콘텐츠가 줄 상자의 오른쪽 가장자리에 맞추어집니다. (세로 쓰기 모드에서는 writing-mode 설정에 따라 물리적으로 위쪽 또는 아래쪽이 될 수 있습니다.)
start direction 속성의 값이
  • ltr일 경우에는 left 값과 동일합니다.
  • rtl일 경우에는 right 값과 동일합니다.
end direction 속성의 값이
  • ltr일 경우에는 right 값과 동일합니다.
  • rtl일 경우에는 left 값과 동일합니다.
center 인라인 콘텐츠가 줄 상자 내에서 가운데 정렬됩니다.
justify 인라인 콘텐츠는 start 값으로 정렬됩니다. 텍스트가 콘텐츠인 경우 라인 박스에 꽉 채워져서 줄바꿈해야 하는 경우 줄바꿈 이전의 텍스트는 왼쪽과 오른쪽 가장자리에 꽉 채워져야 합니다.

구문

CSS 
/* 키워드 값 */
text-align: left;
text-align: right;
text-align: start;
text-align: end;
text-align: center;
text-align: justify;

/* 글로벌 값 */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;

형식 정의

text-align 속성의 형식 정의
초깃값 start 값임.
start 값을 지원하지 않는 브라우저에서는 direction 속성의 값이
  • ltr일 경우에는 left 값
  • rtl일 경우에는 right 값임
적용 요소 블록 컨테이너 요소(너비나 높이를 지정할 수 있는 요소)
상속 예
애니메이션 아니오

주의할 점

text-align 속성 사용 시 주의할 점이 있습니다.

text-align: justify 사용 시 접근성 문제 고려

양쪽 정렬된 텍스트로 인해, 특히 영문의 경우 단어 사이의 일관되지 않은 간격은 난독증과 같은 인지적 문제가 있는 사람들에게 문제가 될 수 있습니다. 화면의 폭이 좁은 모바일에서는 더 주의해야 합니다.

text-align: justify 특히 영문의 경우 단어 사이의 일관되지 않은 간격을 보입니다.

text-align: justify 사용 시 텍스트가 콘텐츠인 경우 라인 박스에 채워지지 않았을 경우 start 값으로 정렬

text-align: justify 사용 시 텍스트가 막연히 양쪽 정렬된다고 착각할 수 있습니다. 아마도 Microsoft Word 등에서 구현하는 균등 분할과 헷갈려서 그럴 수 있습니다.

text-align: justify은 인라인 콘텐츠는 start 값으로 정렬됩니다. 텍스트가 콘텐츠인 경우 라인 박스에 꽉 채워져서 줄바꿈해야 하는 경우에만 줄바꿈 이전의 텍스트는 왼쪽과 오른쪽 가장자리에 꽉 채워지는 것입니다.

HTML 
<style>
    p {
        background-color: yellowgreen;
        text-align: justify;
    }
</style>
<p>text-align: justfiy;</p>
실제 적용된 모습 text-align: justify 사용 시 텍스트가 콘텐츠인 경우 라인 박스에 채워지지 않았을 경우 start 값으로 정렬됩니다.

text-align 속성은 해당 요소의 가로 영역 내에서 정렬을 설정

다음이 예시를 통해 살펴보겠습니다.

text-align: center 
<style>
    span {
        text-align: center;
    }
</style>
<span>text-align: center;</span>
실제 적용된 모습 <span> 태그에 text-align: center를 적용한 모습

위 예시를 보면 실제 적용된 모습에서 text-align: center가 적용되어 텍스트가 가운데 정렬해야 할 것 같은데 그렇지 않고 원래의 모습으로 되어 있는 것을 볼 수 있습니다.

하지만 위 예시의 적용된 모습은 착시가 생겨 text-align: center가 적용되지 않은 것으로 생각하는 것입니다. 다음의 예시 보겠습니다.

text-align: center <span> 태그에 배경색을 추가했습니다. 
<style>
    span {
        text-align: center;
        background-color: yellowgreen;
    }
</style>
<span>text-align: center;</span>
실제 적용된 모습 <span> 태그에 text-align: center를 적용한 모습

이 예시를 보면 배경색이 칠해진 해당 영역이 보입니다. text-align 속성은 해당 요소의 가로 영역 내에서 정렬을 설정합니다. 즉, 예시의 <span> 태그는 가로 정렬을 시도했지만 가로의 영역과 <span> 태그의 가로 영역이 동일하기 때문에 text-align: center가 적용되지 않아 보이는 것 뿐입니다.

활용 예제

text-align 속성으로 활용할 수 있는 예제를 살펴보겠습니다.

이미지 가로 가운데 정렬하기

text-align 속성은 텍스트뿐만 아니라 인라인 콘텐츠의 가로 정렬을 설정한다는 것에 유념하세요.
다음은 인라인 콘텐츠인 이미지를 text-align 속성을 사용해서 가운데 정렬하는 활용 예제입니다.

HTML 
<div class="container">
    <img class="image" src="image-source.jpg" alt="이미지">
</div>
CSS 
.container {
    background-color: orange;
    text-align: center; /* 좌우 공간이 있는 조상 요소의 가로 공간을 기준으로
                           자손 요소의 텍스트, 이미지 등 인라인 레벨 content를 가운데 정렬시킴 */
}
.image {
    width: 200px;
    vertical-align: top;
}
실제 적용된 모습
CSS로 이미지 가로 세로 가운데 정렬 팁!

입력 박스 스타일링

다음은 입력 박스의 텍스트를 text-align 속성을 사용해서 가운데 정렬하는 활용 예제입니다.

HTML 
<style>
[type="text"] {
    padding: 0.5em;
    outline: none;
    border: none;
    border-bottom: 2px solid;
    text-align: center;
    transition: all 0.3s;
    width: 300px;
}
[type="text"]:focus {
    border-color: #006466;
    background-color: rgba(0, 116, 117, .1);
}
[type="text"]::placeholder {
    transition: opacity 0.3s;
}
[type="text"]:focus::placeholder {
    opacity: 0;
}
</style>
<input type="text" placeholder="여기에 입력하세요...">
CSS placeholder 텍스트에 스타일 적용하기
실제 적용된 모습

브라우저 호환성

text-align 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-align 예 예 예 예

명세서

text-align 속성의 명세서 사양
명세서 사양
text-align CSS Text Module Level 3
#text-align-property

참고문헌

같이 보기