[CSS] 세로중앙정렬
Table은 자체로 valign속성으로 세로중앙정렬을 가능하게 하지만 현제 레이아웃 기법으로 많이 쓰이는 div는 세로로 중앙정렬 시키기가 참으로 난감하다. 1. 스크립트로 세로 중앙 정렬 시킨다. <script type="text/javascript"> objs = document.getElementsByTagName('DIV'); for (var i = 0 ; i < objs.length ; i++ ) { if (objs[i].className == "vAlign") objs[i].style.marginTop = Math.floor(parseInt(objs[i].parentNode.offsetHeight - objs[i].offsetHeight) / 2)+"px"; } } window.onload = vAlign; </script> <style type="text/css"> div.box{height:300px;} </style> <div class="box"> <div class="vAlign">세로중앙정렬</div> </div> 스크립트가 알아서 계산해주기 때문에 편하다~>ㅁ<~ 2. CSS를 활용한다. <style type="text/css"> div.box{height:100px;position:relative;} ul.vertical{position:absolute;top:50%;margin-top:-20px;} ul.vertical li{height:30px;} </style> <div class="box"> <ul class="vertical"> <li>세로중앙정렬</li> ...