使用960網格系統的中心內容div

這聽起來很簡單，但是。我根本無法做到。以下是我有：使用960網格系統的中心內容div

<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浮動在屏幕中間？

來源

2011-12-22 Abdel Raoof

你想讓它水平**和**垂直居中？ – Aaron 2011-12-22 09:11:32

該框架確保其水平居中..我需要它垂直.. – 2011-12-22 09:16:13

也注意到它不是div的內容..作爲一個整體的div應該在中間.. – 2011-12-22 09:16:41

給予ID到您的內容DIV

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';

來源

2011-12-22 09:17:04 Dau

不要忘記'+'px' '！ – Aaron 2011-12-22 09:26:16

認真，我期待一個CSS解決方案..讓我檢查一下！ – 2011-12-22 09:27:56

垂直對齊，你必須給頂部位置，純粹的CSS解決方案使身體固定高度，然後分配頂部位置內容div – Dau 2011-12-22 09:30:37

-1

*{ 
    margin:0; 
    padding:0; 
} 

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

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

來源

2012-10-07 16:13:09

這是否比接受的答案更好？ – 2012-10-07 16:17:33

看不到這會對垂直對齊產生任何影響 – 2012-10-07 16:24:36

它對我很有幫助http://periperiskinwear.com/product/catalogue/ – 2012-10-25 18:17:11

使用960網格系統的中心內容div

回答

相關問題