* IE8 이상에서만 정상적으로 동작하는 방법입니다. 이전 버전 IE에서는 CSS HACK을 써야하니...
전 그냥 지원안합니다 -_-;; I hate IE.
1. 가로 정렬.
가로정렬은 쉽습니다.
CSS
#wrap { width: 150px; height: 150px; background-color: yellow; } #horizon { width: 50px; height: 50px; background-color: green; margin: 0 auto; }HTML
위와 같이 margin: 0 auto; 만 주면 되거든요.
물론 #horizon 에 display:inline-block을 주어 인라인 요소로 만든후 #wrap에 text-align:center 형태로 해도 되지만 margin이 가장 간단한듯 싶군요.
2. 세로정렬
세로 정렬이 조금 힘들어 집니다.
일단 기본적인 방법을 봅시다.
- 첫번째 방법
#wrap { width: 150px; height: 150px; background-color: yellow; position: relative; } #vertical { width: 50px; height: 50px; background-color: green; position: absolute; top:50%; margin-top: -25px; }
- 두번째 방법
#wrap { width: 150px; height: 150px; background-color: yellow; display: table-cell; vertical-align: middle; } #vertical{ width: 50px; height: 50px; background-color: green; display: inline-block; }HTML
첫번째는 안쪽 초록색 블록의 크기를 정확히 알고 있을 때 사용하는 방법입니다.
시작 지점을 50% 내린다음에, 블록크기 절반만큼 위로 마이너스 마진을 준 것이죠.
크기를 모를때는 사용할 수 없습니다.
그래서 크기와 상관없이 무조건 세로 중앙정렬을 사용하는 방법으로는 두번째 방법을 사용하셔야 합니다.
하지만... 여기서 또 문제가 발생하는 부분이 있는데요?
float:left, float:right 등으로 플로팅 된 박스 모델의 경우 세로정렬이 또 제대로 동작을 하지 않는다는 겁니다.
미치겠네요.
그래도 방법은 있습니다.
첫번째 방법처럼 position 속성을 조정함으로써 일일이 다 컨트롤해 주던가, table 구조로 만들어 버리면 됩니다.
다음은 그 대망의 완성본 입니다.
3. floating Div 에서 가로세로 중앙 정렬
CSS/*왼쪽상자*/ #floating_v_align { width: 150px; height: 150px; background-color: yellow; float: left; display: table; } #floating_v_align #cell { display: table-cell; vertical-align: middle; } #block { width: 50px; height: 50px; background-color: green; margin: 0 auto; } /*오른쪽상자*/ #floating_wrap { width: 150px; height: 150px; background-color: blue; float: left; position: relative; } #block2 { width: 50px; height: 50px; background-color: green; position: absolute; top: 50%; margin-top: -25px; margin-left: -25px; left: 50%; }HTML
참고 : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
'CSS' 카테고리의 다른 글
[CSS] 100% Height (1) | 2013.07.10 |
---|