text-align
CSS text-align
속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 vertical-align
과 동일하나 세로가 아닌 가로 방향으로 동작합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
구문
/* 키워드 값 */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;
/* 표 열의 문자 기반 정렬 */
text-align: ".";
text-align: "." center;
/* 블록 정렬 값 (비표준 구문) */
text-align: -moz-center;
text-align: -webkit-center;
/* 전역 값 */
text-align: inherit;
text-align: initial;
text-align: unset;
text-align
속성은 다음 방법 중 하나를 사용해 지정합니다.
값
start
- 쓰기 방식이 좌횡서면
left
와 같고, 우횡서면right
과 같습니다. end
- 쓰기 방식이 좌횡서면
right
과 같고, 우횡서면left
와 같습니다. left
- 인라인 콘텐츠를 줄 상자의 왼쪽 모서리로 정렬합니다.
right
- 인라인 콘텐츠를 줄 상자의 오른쪽 모서리로 정렬합니다.
center
- 인라인 콘텐츠를 줄 상자의 가운데로 정렬합니다.
justify
- 인라인 콘텐츠를 양쪽 정렬합니다. 마지막 줄을 제외하고, 줄 상자의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄웁니다.
justify-all
justify
와 같지만 마지막 줄에도 적용합니다.match-parent
inherit
과 비슷하지만,start
와end
값을 부모의direction
에 맞춰 적절한left
와right
값으로 치환합니다.<string>
- 표 칸에 적용할 경우, 칸의 콘텐츠를 해당 문자에 맞춰 정렬합니다.
접근성 고려사항
양쪽 정렬 적용 시 생기는 불규칙한 여백은 난독증 등 인지력 저하를 겪고 있는 사용자에게 문제가 될 수 있습니다.
형식 정의
초기값 | start , or a nameless value that acts as left if direction is ltr , right if direction is rtl if start is not supported by the browser. |
---|---|
적용대상 | block containers |
상속 | yes |
Computed value | as specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right |
Animation type | discrete |
형식 구문
예제
왼쪽 정렬
HTML
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.example {
text-align: left;
border: solid;
}
결과
가운데 정렬
HTML
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.example {
text-align: center;
border: solid;
}
결과
양쪽 정렬
HTML
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.example {
text-align: justify;
border: solid;
}
결과
참고
인라인 콘텐츠를 가운데 정렬하지 않고 자신을 정렬하는 법은 margin
을 auto
로 설정하는 것입니다.
.something {
margin: auto;
}
.something {
margin: 0 auto;
}
.something {
margin-left: auto;
margin-right: auto;
}
명세
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'text-align' in that specification. |
Editor's Draft | No changes |
CSS Text Module Level 4 The definition of 'text-align' in that specification. |
Editor's Draft | Added the <string> value. |
CSS Text Module Level 3 The definition of 'text-align' in that specification. |
Candidate Recommendation | Added the start , end , and match-parent values. Changed the unnamed initial value to start (which it was). |
CSS Level 2 (Revision 1) The definition of 'text-align' in that specification. |
Recommendation | No changes |
CSS Level 1 The definition of 'text-align' in that specification. |
Recommendation | Initial definition |
브라우저 호환성
BCD tables only load in the browser