Question

这听起来很简单但是。我根本无法做到这一点。这就是我所拥有的：

<h1>Head </h1>
<div class="container_12" >
    <div class="grid_6">
        <h1>Heading one</h1>
        <p>Content and Images</p>
    </div>
        <h1>Heading two</h1>
        <p>Content and Images</p>
    </div>
    <div class="grid_12">The footer</div>
    </div>
<body>
</body>

我需要grid_6的div在中间垂直对齐任何类型的屏幕。似乎container_12的主要div只是不占用页面的全高！如何让内容div浮动在屏幕中间？

Answer 1

为您的内容div提供ID

var screenheight = document.body.clientHeight;
var content_div_height = document.getElementById("content_div_id").offsetHeight;
var content_div_top = (screenheight/2) - (content_div_height/2)
document.getElementById("content_div_id").style.top = content_div_top + 'px';

Answer 2

*{  
   margin:0;  
   padding:0;  
}  

body{  
   text-align:center; /*For IE6 Shenanigans*/  
}  

#wrapper{  
   width:960px;  
   margin:0 auto;  
   text-align:left;  
}

中心内容div使用960网格系统

2 个答案: