[HTML] 수직 중앙정렬(가운데정렬)

글자를 수직 중앙정렬하기 위해서는 

line-height : text를 감싸고 있는 박스의 높이 로 설정한다.

 

원래 line-height는 행간을 늘려주는 것이라고만 생각했는데, 태그를 확장시켜서 활용하는 방안도 꾸준히 생각해보려 노력하자.

 

웹 컨텐츠의 흐름은 가로가 기준이기 때문에, 수직 방향의 정렬은 어느 정도 제약이 있다.

정렬은 기준(위치 속성 요소의 종류)에 따라 달라진다

 

 

1. line-height

display attribute 가 block, inline-block인 경우 사용 가능

내부 inline 요소가 2줄 이상으로 표시될 경우, 2줄 이후 내용이 부모 요소 바깥으로 나갈 수 있음

2. table 

table-cell 태그의 수직정렬 속성인 vertical-align 속성 사용 가능

3. vertical-align 

<td> vertical-align : middle; </td>

테이블 태그는 레이아웃 만드는 용도로는 사용하면 안되므로 레이아웃의 수직 정렬을 위해 테이블 태그 사용하는 것은 지양

4. top, transfrom

position attribute가 absolute일 경우)

절대좌표를 사용하기 때문에 vertical-align, line-height 로 수직 정렬 불가

부모의 position attribute가 relative여야 부모 요소 안에 수직 중앙정렬 할 수 있다는 것에 유의 !