CSS 콘텐츠 수직 정렬하기.
CSS를 적용하는 부분에서 콘텐츠를 중앙 정렬하는 부분에 관해서는
간단하게 text-aligen:center의 속성을 적용하기만 하면 됩니다.
하지만 수직 정렬에 관해서는 중앙 정렬과 다르게 몇가지 전제 조건이 성립한 CSS를 적용시켜 주셔야,
수직 정렬이 가능한데,
간단한 예제와 결과 화면을 준비했습니다.
일단 수직 정렬의 몇가지 최소 CSS 조건이 존재합니다.
1. height의 속성값이 존재해야한다.
2. display의 속성값이 table-cell이어야 한다.
1. 고정 높이의 수직정렬.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html lang="ko"> <head> <title>Start Up</title> <meta charset="utf-8"> </head> <style type="text/css"> html, body { width: 100%; min-height: 100%; height: 100%; } .parent_wrap { width: 400px; height: 200px; border: 2px solid gray; display: table-cell; vertical-align: middle; text-align: center; } </style> <body> <div class="parent_wrap"> <span>Vertical Middle Content</span> </div> </body> </html> |
고정 높이의 콘텐츠 수직 정렬은 위에 말했던 수직정렬의 최소 조건 2가지만 만족하면 되는데
중요한건 영역의 height값이 %속성이 아닌 고정 단위의 속성이어야 합니다.
반응형 웹을 코딩하거나 가변적인 크기의 단위를 사용하신다면 아래의 예제를 참고하시면 되겠습니다.
2. 가변 높이의 수직정렬.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html lang="ko"> <head> <title>FLEAPOP</title> <meta charset="utf-8"> </head> <style type="text/css"> html, body { width: 100%; min-height: 100%; height: 100%; } .parent_wrap { width: 400px; height: 50%; border: 2px solid gray; display: table; text-align: center; } .child_wrap { display: table-cell; vertical-align: middle; } </style> <body> <div class="parent_wrap"> <div class="child_wrap"> <span>Vertical Middle Content</span> </div> </div> </body> </html> |
첫번째 예제와 다른 점은 parent_wrap의 height의 속성이 가변적이라는 점입니다.
가변적인 경우 단순히 parent_wrap의 display속성을 table-cell, vertical-align의 속성을 middle로 잡는다고
콘텐츠의 수직정렬이 발생하지 않습니다.
그럼 예제코드에 대해 설명을 드리자면 가변적인 크기를 가지는 영역 즉 parent_wrap의 속성을
display: table; 속성으로 잡아줍니다.
그리고 첫번쩨 예제와는 다르게 parent_wrap의 영역 안에 머릿말에 제시한 수직정렬의
최소조건을 만족하는 영역을 추가해주시면 됩니다.
그 조건을 가지는 영역 child_wrap을 parent_wrap안에 넣어주게 됩니다.
결과로는 두번째 예제코드는 가변적인 크기를 가지는 영역에서 콘텐츠가 수직정렬 되는 결과를 보실수 있습니다.
#CSS수직정렬#CSS고정높이수직정렬#CSS가변높이수직정렬
'개발 > HTML, CSS, Script' 카테고리의 다른 글
| 드랍다운 메뉴 (0) | 2017.09.30 |
|---|---|
| 슬라이드 메뉴, 슬라이딩 메뉴 (0) | 2017.09.30 |
| 이미지 반복 롤링 배너 (7) | 2017.09.24 |
| [Part2] Jquery 다중 파일 업로드 미리보기 제공하기, 삭제, POST업로드 (38) | 2017.08.06 |
| [Part1] Jquery 파일 업로드시 미리보기 제공하기, 다중 파일 업로드 미리보기 제공하기 (18) | 2017.05.15 |
