 |
|
| |
|
  |
12년 전
|
1. css
<style type="text/css">
.box{ width:100%; height:30px; display:table-cell; vertical-align:middle; border:1px solid #ccc; text-align:left;}
.axis{ width:0; height:100%; display:inline-block; vertical-align:middle; border:0px solid #ccc;}
</style>
<div class="box">
<span class="axis"></span>
세로정렬
</div>
2.자바스크립트
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<script>
function vAlign() {
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>
</head>
<body>
<div style="height:200px;border:1px solid red;">
<div class="vAlign">
여기가 세로 중앙정렬;;;<br>
여기가 세로 중앙정렬;;;<br>
</div>
</div>
</body>
</html>
|
|
 추천 : 664 |
추천
목록
|
|
| |
|
