HTML 과 CSS 로 레이아웃 작업을 하는 경우에 어느 특정 영역에서 중앙 정렬을 해야하는 경우가 생기는데요. 일반적으로 텍스트 중앙 정렬은 가장 쉬운것 같습니다. 그러나 문제는 세로로 중앙 정렬하기가 꽤 까다로운데요. 그래서 예전에는 테이블 태그를 사용해서 했었는데 문제는 HTML TAG(태그) 사용법에 맞지 않기 때문에 즉 웹표준 형식이 아니기 때문에 데이터를 의미하는 내용이 아니기 때문에 테이블 태그(TABLE TAG) 를 사용할 수가 없습니다. 그러면 과연 어떻게 해야할까요?
다행히 해결방법이 있었습니다. 테이블 태그를 직접 사용하지는 않지만 CSS 로 마치 테이블 태그를 사용한 효과를 준다고 하면 이해가 빠르실까요? 그래서 아래의 예제를 참고해서 사용하셔야 하는데요.
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#parent {display: table}
#child {
display: table-cell;
vertical-align: middle;
}
IE Fix:
child {display: inline-block}출처 : http://www.vanseodesign.com/blog/demo/vertical-centering/table-cell.php
HTML 코드에서는 크게 두가지의 DIV 로 구성이 되어있습니다. parent 와 child 입니다. 그리고 child 태그안에 컨텐츠가 들어가면 됩니다. 그리고 CSS 코드 부분에서는 parent 부분에 display 속성을 table 로 지정합니다. 그리고 child 부분에 display 속성을 table-cell 로 지정하고 vertical-align 의 값을 middle 로 지정하면 됩니다. 그리고 익스플러 브라우저에서 table-cell 을 잘 인식을 못하기 때문에 display 속성을 inline-block 으로 줘야야 한다고 나오는데요. 저는 적용을 안해도 잘 되더라구요. 아무튼 제가 위의 코드를 참고해서 작성해 보았는데요.
아래의 예제 코드를 보시면 child 부분에 display 값이 table-cell 인데요. 이것을 사용하시려면 그 부모인 div 부분의 display 값이 table 이 되어야 옳바로 적용이 됩니다. 그리고 table-cell 인 부분에는 width 나 height 값이 적용이 안된다는 점을 유의하세요 그럼 세로 중앙으로 텍스트 말고 div 태그로 묶어서 세로 정렬 하려면 어떻게 할까요?
<html>
<head>
<title>table cell and vertical align text</title>
<style>
#parent {
width:100%;
height:300px;
border:1px solid;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
text-align:center;
background:#efefef;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
Content here
</div>
</div>
</body>
</html>
아래의 소스코드를 보듯이 contents 부분이 div 태그로 되어있는 영역인데요. 로그인 박스와 같이 화면 중앙에 배치를 하는데 사용하면 좋을것 같습니다. 아무튼 contents 부분에 margin:0 auto; 코드가 추가된것을 보실 수가 있습니다. 가로 정렬이 일반 텍스트가 아니다 보니 마진 값으로 지정해줘야 합니다. 아니면 다른 방법으로 한다면 contents 을 display:inline-block; 으로 하고 테스트 정렬하듯이 text-align:center;로 해도될것 같은데요. 아무튼 이렇게 하는것은 테스트는 않해보았지만 나중에 시간되시면 해보시구요. 우선은 아래의 예제처럼 마진 값으로 설정하는 방법을 사용해주시기 바랍니다.
<html>
<head>
<title>table cell and vertical align div</title>
<style>
#parent {
width:100%;
height:300px;
border:1px solid;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
background:#efefef;
}
#contents {
width:200px;
height:200px;
border:1px solid;
margin:0 auto;
background:#4c9ed9;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
<div id="contents">
Content here
</div>
</div>
</div>
</body>
</html>
table-cell.html