28) CSS 속성 - text-align

vertical-align이 인라인 요소의 수직 정렬이었다면, text-align은 인라인 요소의 수평 정렬에 사용됩니다.

이 속성 또한 div와 같은 블록 레벨 요소에는 적용되지 않습니다.

 

text-align 속성

텍스트의 정렬을 지정하는 속성입니다. 

    기본 값 : left (Right to Left 언어일 경우는 right)

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

기본 값은 left이지만 경우에 따라 다릅니다.

문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고,

RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 됩니다. 

 

< 속성 값 >

left	텍스트를 왼쪽으로 정렬
right	텍스트를 오른쪽으로 정렬
center	텍스트를 중앙으로 정렬
justify	텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)

 

 

text-align과 display의 관계

 -  text-align은 inline-level에 적용

 -  text-align은 block-level에 적용할 수 없음 

그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까요?

박스모델 챕터에서 다룬 margin의 auto 값을 이용해서 하시면 됩니다. 

• 가운데 정렬 인라인 요소 : text-align (center) 블럭 요소 :  margin (auto)