CSS text-align 속성 – 텍스트 등 인라인 콘텐츠 가로 정렬 설정

`text-align` 속성 사용법

text-align 속성은
블록 컨테이너와 테이블 셀 요소 내부의 인라인 콘텐츠의 가로 정렬을 설정하는 속성입니다.
이러한 특징을 이용하면 텍스트의 가로 정렬을 쉽게 설정할 수 있습니다.

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

text-align 속성의 형식은 다음과 같습니다.

구문

정의

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

값

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 속성 값 예시

/* 키워드 값 */
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 속성 사용 시 주의할 점이 있습니다.

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

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

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

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

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

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

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

HTML <span> 태그

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

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

text-align: center; <span> 태그에 배경색을 추가했습니다.

<style>
    span {
        text-align: center;
        background-color: yellowgreen;
    }
</style>
<span>text-align: center;</span>

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

활용 예제

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

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

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

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 텍스트에 스타일 적용하기