text-align으로 문단 정렬하기

1. text-align? 

text-align은 문단을 정렬하는 속성이다. text-align 사용 시 주의할 점은 block요소에서만 적용할 수 있다는 점이며  block요소 안에 정렬되는 것은 inline요소인 텍스트뿐만 아니라 이미지도 정렬된다.   

 

2. text-align 속성 

• text-align: left  왼쪽 정렬
• text-align: right  오른쪽 정렬     
• text-align: center  중앙 정렬
• text-align: justify  양쪽 정렬로 왼쪽과 오른쪽의 가장자리 끝에 맞춰 정렬되는 것이다. 

 

3. 적용 예시 

text-align 코드

text-align 적용 예시

block요소인 div에 text-align을 적용했을 때 텍스트가 잘 정렬된다.  

 

text-align 코드

text-align 적용 예시

block요소인 div에 text-align: center을 적용했을 때 inline요소인 span과 img가 중앙 정렬된 것을 확인할 수 있다. 하지만 block요소가 아닌 inline요소 span과 img에 직접 text-align: center을 준 경우 중앙 정렬되지 않는다. 

 

text-align 코드

text-align 적용 예시

오렌지색과 핑크색 div 박스를 감싼 div박스에 text-align: center을 적용한 경우 오렌지색과 핑크색 div 박스는 중앙 정렬되지 않고 박스 안 텍스트만 중앙 정렬된 것을 확인할 수 있다. 이는 text-align을  block요소에서만 적용할 수 있다고 해서 div 자체가 정렬되지 않는다는 것을 보여준다.