CSS
CSS로 DIV 태그를 상하, 좌우 가운데 정렬하기
InspiredJW
2012. 2. 22. 23:11
CSS를 이용하여 가운데 정렬할 일이 많은데요.
생각보다 쉽지 않습니다.
예를 들어 이렇게 DIV 안에 DIV 한 개가 있다고 가정해봅시다.
HTML
CSS
예제 보기
이 상태에서 먼저 Horizontal(가로)로 정렬을 먼저 해볼까요?
<div id="container" align="center"> 이렇게 하면 스타일시트(CSS)가 완전히 분리가 되지 않겠죠?
CSS
이렇게 "margin 상하는 일단 주지 않고 좌우를 auto로 자동으로 맞춤"해줌으로써
#block div 양 쪽에 자동으로 알맞게 margin이 들어감으로써 가운데 정렬이 되게 됩니다.
예제 보기
또 다른 방법으로는
CSS
text-align이 가능하게 만들어 가운데 정렬을 하는 방법이 있습니다.
예제 보기
그럼 이제 부터 진짜 관건인 Veritcal(세로)로 정렬 하는 법을 알아보겠습니다!
#container DIV의 height 값이 변하지 않고 고정된 값이라면
( #container height - #block height ) / 2 = margin 값
이 공식을 사용해서 #block DIV에 세로 margin 값을 주면 세로로도 정렬이 됩니다.
예제 보기
하지만 만약
저 파란 #container DIV의 높이 값이 어떤 값일지 알 수 없고 고정적이지 않다면?
물론.. JavaScript나 jQuery를 이용해서 동적으로
#container DIV의 변하는 Height값에 맞춰 #block DIV의 margin 값을
바꿔주는 방법도 있겠지만
CSS로만 할 수 있다면 더 좋겠죠?
그래서 방법이 있습니다!
바로 vertical-align 을 이용하는 것인데요.
이렇게 #container DIV 를 마치 TABLE 태그 안 TD처럼 하나의 table-cell 처럼 사용하면서
세로로 정렬하는 법입니다.
이 방법으로 하면 JavaScript나 jQuery 힘을 빌리지 않고도 세로 값이 일정하지 않은 DIV 안에서도
세로 정렬을 할 수 있습니다.
생각보다 쉽지 않습니다.
예를 들어 이렇게 DIV 안에 DIV 한 개가 있다고 가정해봅시다.
HTML
<div id="container"> <div id="block"> </div> </div>
CSS
#container { width:300px; height:300px; background-color:#191970; } #block { width:50px; height:50px; background-color:#ffd700; }
예제 보기
이 상태에서 먼저 Horizontal(가로)로 정렬을 먼저 해볼까요?
#container { width:300px; height:300px; background-color:#191970; } #block { width:50px; height:50px; background-color:#ffd700; margin:0 auto; }
이렇게 "margin 상하는 일단 주지 않고 좌우를 auto로 자동으로 맞춤"해줌으로써
#block div 양 쪽에 자동으로 알맞게 margin이 들어감으로써 가운데 정렬이 되게 됩니다.
예제 보기
또 다른 방법으로는
CSS
#container { width:300px; height:300px; background-color:#191970; text-align:center; } #block { width:50px; height:50px; background-color:#ffd700; display:inline-block; }이렇게 #block DIV 의 block 요소를 기본값인 block에서 inline-block으로 바꿔주어 inline 요소를 주어
text-align이 가능하게 만들어 가운데 정렬을 하는 방법이 있습니다.
예제 보기
그럼 이제 부터 진짜 관건인 Veritcal(세로)로 정렬 하는 법을 알아보겠습니다!
#container DIV의 height 값이 변하지 않고 고정된 값이라면
#container { width:300px; height:300px; background-color:#191970; text-align:center; } #block { width:50px; height:50px; background-color:#ffd700; display:inline-block; margin:125px 0; }이렇게
( #container height - #block height ) / 2 = margin 값
이 공식을 사용해서 #block DIV에 세로 margin 값을 주면 세로로도 정렬이 됩니다.
예제 보기
하지만 만약
저 파란 #container DIV의 높이 값이 어떤 값일지 알 수 없고 고정적이지 않다면?
물론.. JavaScript나 jQuery를 이용해서 동적으로
#container DIV의 변하는 Height값에 맞춰 #block DIV의 margin 값을
바꿔주는 방법도 있겠지만
CSS로만 할 수 있다면 더 좋겠죠?
그래서 방법이 있습니다!
바로 vertical-align 을 이용하는 것인데요.
#container { width:300px; height:300px; background-color:#191970; text-align:center; vertical-align:middle; display:table-cell; } #block { width:50px; height:50px; background-color:#ffd700; display:inline-block; }예제 보기
이렇게 #container DIV 를 마치 TABLE 태그 안 TD처럼 하나의 table-cell 처럼 사용하면서
세로로 정렬하는 법입니다.
이 방법으로 하면 JavaScript나 jQuery 힘을 빌리지 않고도 세로 값이 일정하지 않은 DIV 안에서도
세로 정렬을 할 수 있습니다.