다양한 높이의 요소들을 수직 가운데 정렬하는 일은 수평 가운데 정렬하는 것보다 다로 까다롭다.
각각의 특징을 비교하여 6가지의 수직 가운데 정렬을 소개한다.
수직정렬은 자식이 inline속성을 가지냐 block 속성을 가지냐에따라 적용 여부가 달라지므로,
각 속성들의 특징파악이 선행되어야한다.
1. display : flex 사용
특징 |
가장 손쉽게 할수있는 방법 IE9 이하는 지원하지 않음 |
방법 | 부모에 display:flex; align-items:center; 와 높이값 추가 |
See the Pen 수직 가운데 정렬 1 by off-echoi (@off-echoi) on CodePen.
2. display : table 사용
특징 | 태그의 깊이가 깊어 질 수 있다. |
방법 |
자식 상위의 부모요소에 display:table-cell; vertical-align: middle; |
See the Pen 수직 가운데 정렬3 by off-echoi (@off-echoi) on CodePen.
3. :before 로 가상의 기준점 만들기
특징 |
낮은 IE버전도 적용 가능 |
방법 |
부모에 가상의 요소를 추가해 높이값을 100%로 주고 vertical-align:middle |
See the Pen 수직 가운데 정렬4 by off-echoi (@off-echoi) on CodePen.
4. position + margin 속성
특징 |
자식 요소가 여러개이거나, 스크립트를 적용할 경우 태그의 깊이가 깊어질 수 있다. |
방법 |
최상위 요소에 position:relative; |
See the Pen 수직 가운데 정렬5 by off-echoi (@off-echoi) on CodePen.
5. position + transform 속성
특징 |
자식 요소가 여러개이거나, 스크립트를 적용할 경우 태그의 깊이가 깊어질 수 있다. |
방법 |
최상위 요소에 position:relative; |
See the Pen 수직 가운데 정렬5 by off-echoi (@off-echoi) on CodePen.
6. line-height 사용
특징 |
텍스트의 가운데 정렬이 쉬움 2줄 이상의 경우 원하는 결과를 얻을 수 없다. 부모의 높이가 바뀔 경우 line-height 값도 조정해주어햐 함 |
방법 |
자식에 line-height:(부모의 높이만큼); |
See the Pen 수직 가운데 정렬2 by off-echoi (@off-echoi) on CodePen.
'개발공부 > HTML & CSS' 카테고리의 다른 글
[CSS] selectbox 디자인하기 (0) | 2020.03.24 |
---|