text-align
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS text-align
속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 vertical-align
과 동일하나 세로가 아닌 가로 방향으로 동작합니다.
시도해보기
구문
/* 키워드 값 */
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
Experimental-
쓰기 방식이 좌횡서면
left
와 같고, 우횡서면right
과 같습니다. end
Experimental-
쓰기 방식이 좌횡서면
right
과 같고, 우횡서면left
와 같습니다. left
-
인라인 콘텐츠를 줄 상자의 왼쪽 모서리로 정렬합니다.
right
-
인라인 콘텐츠를 줄 상자의 오른쪽 모서리로 정렬합니다.
center
-
인라인 콘텐츠를 줄 상자의 가운데로 정렬합니다.
justify
-
인라인 콘텐츠를 양쪽 정렬합니다. 마지막 줄을 제외하고, 줄 상자의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄웁니다.
justify-all
Experimental-
justify
와 같지만 마지막 줄에도 적용합니다. match-parent
Experimental-
inherit
과 비슷하지만,start
와end
값을 부모의direction
에 맞춰 적절한left
와right
값으로 치환합니다. <string>
Experimental-
표 칸에 적용할 경우, 칸의 콘텐츠를 해당 문자에 맞춰 정렬합니다.
접근성 고려사항
양쪽 정렬 적용 시 생기는 불규칙한 여백은 난독증 등 인지력 저하를 겪고 있는 사용자에게 문제가 될 수 있습니다.
형식 정의
초기값 | 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 |
계산 값 | 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 |
---|
CSS Logical Properties and Values Level 1 # text-align |
CSS Text Module Level 3 # text-align-property |
브라우저 호환성
BCD tables only load in the browser