텍스트 수직 정렬 (vertical-align)

 

 

 

vertical-align 으로 텍스트 세로 수직 정렬하기

텍스트의 가운데 정렬은 text-align을 사용하고 세로 수징 정렬은 vertical-align 을 사용합니다.

텍스트의 정렬은 table 에서 먹기 때문에 vertical-align 을 사용하려면 꼭 display 설정을 해줘야 합니다.

height: 200px;
display: table-cell;
vertical-align: 속성;

 

 

 

※ vertical-align 속성

baseline	기본값. 부모 요소 기준선에 정렬
top	라인에서 제일 위에 맞춰서 정렬
middle	부모 요소의 중간에 정렬
bottom	라인에서 제일 하단에 맞춰서 정렬

 

 

 

※vertical-align 주의할 점

- float , position 속성이 있으면 display를 table-cell 줘도 적용이 안됩니다.

- display table-cell 이 있는 경우 clear:both 속성 안됩니다.