[CSS3] css3 가운데(중앙) 정렬

남양주개발자

·

2016. 11. 9. 09:43

728x90
반응형


css를 활용해 가로 및 세로로 중앙정렬하는 방법에는 정말 많은 방식들이 있습니다. 각 중앙정렬 방법은 모두 주의할 점이 있지만 그러한 방법들을 조합하면 IE8 및 이후 버전에서도 일관되게 크로스 브라우징을 지원하는 중앙정렬 기법을 만들어낼 수 있습니다.



블록 만들기



반응형 웹사이트를 제작하고 있다면 대부분 요소의 크기를 퍼센트로 지정할 것이며, 여기서는 임의의 .container 요소를 만듭니다.




컨테이너 요소가 적절히 늘려질 수 있도록 html, body { width: 100%; height: 100%; }로 지정합니다.



테이블로 바꾸기



이제 .container 안에서 자주 사용되는 테이블 패턴을 이용해 수직 중앙정렬을 하도록 하겠습니다. 이렇게 하려면 일반 블록 레벨 요소가 필요하고, 이 요소들이 테이블 셀처럼 동작하게 만들면 수직 중앙정렬이 가능해집니다.




끝으로 수평 중앙정렬된 요소를 추가합니다.


이 안에는 높이가 동적으로 변하는 텍스트 블록이나 절대 위치가 지정된 요소를 비롯해 여러분이 원하는 어떤 것이든 배치할 수 있습니다.




수정사항 적용



요소의 수평 중앙정렬을 변경하려면 .inner의 text-align 프로퍼티만 수정하면 됩니다. 수직 중앙정렬을 변경하려면 .inner의 vertical-align 프로퍼티를 수정하면 됩니다.



결론



이 예제는 마크업할 게 많아 보일 수도 있지만 실제로 동작하는 부분은 세 개의 div인 .outer, .inner, .centered밖에 없습니다. 그리고 이 세 요소에 스타일을 적용하는 것은 일관성을 띠고 있어서 여러 프로젝트에서 사용하는 기본 CSS에 이 기법을 적용하고 다시는 이 부분에 신경 쓰지 않아도 됩니다. 


이 기법은 대부분의 중앙정렬 기법보다 요소를 하나 더 사용하지만 아주 견고한 기법입니다.


728x90
반응형
그리드형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다

0개의 댓글