對齊網站垂直中間的瀏覽器

-2

我有一個網站是高度490px。我需要將整個網站放到瀏覽器的垂直中間位置。對齊網站垂直中間的瀏覽器

任何建議！

2012-02-02 Sowmya

可能重複（ http://stackoverflow.com/questions/1909753/vertically-align-div-no-tables）以及成百上千人在這裏和互聯網。 – Rob 2012-02-02 14:46:27

<body style="text-align: center"> 
    <div style="text-align: left; width: 950px">content</div> 
</body>

來源

2012-02-02 12:45:51 melanke

我需要垂直對齊不horzontal – Sowmya 2012-02-02 12:55:41

我的錯誤，srry – melanke 2012-02-02 13:08:29

寒意..那就OK :) – Sowmya 2012-02-02 13:16:17

<html> 
    <head> 
    <title>vertical align</title> 
    <style> 
     * {margin:0px;padding:0px} 
     #content {height:490px; width:960px; position:absolute; border: 2px #000 solid} 
    </style> 
    <script> 
     function resize(){ 
     var content = document.getElementById('content'); 
     var body = document.getElementsByTagName('body')[0]; 
     if(window.getComputedStyle){ 
      var bodyHeight = window.getComputedStyle(body).height.replace('px',''); 
     }else if(body.runtimeStyle){ 
      var bodyHeight = body.offsetHeight; 
     } 
     content.style.top = (bodyHeight - 490)/2 + 'px'; 
     } 
     window.onresize = window.onload = resize; 
    </script> 
    </head> 
    <body> 
    <div id="content"> 
    </div> 
    </body> 
</html>

來源

2012-02-02 13:10:35

#content{ 
    height: 490px; 
    margin-top: -245px; 
    top: 50% 
}

來源

2012-02-02 13:11:39 melanke

的傳統方法是使用一個表，並設置vertical-align:middle;，但使用表格排版現在被認爲是不好的做法。新的解決方案是靈活的盒子佈局，但仍然沒有得到廣泛的支持。所以，這是一箇中間解決方案。這有點駭人聽聞，但它可以在每個瀏覽器中完成工作，並且不使用表格。（live demo）

<!doctype html> 
<html lang='en'> 
    <head> 
    <meta charset='utf-8'> 
    <title>positioning test</title> 
    <style type='text/css'> 
     *  {margin:0; padding:0;} 
     body  {position:absolute; width:100%; height:100%;} 
     #pad  {height:50%; min-height:245px;} 
     #content {height:490px; margin-top:-245px; 
       background:#f88; border:2px solid #000;} 
    </style> 
    </head> 
    <body> 
    <div id='pad'></div> 
    <div id='content'></div> 
    </body> 
</html>

請不要使用JavaScript這一點 - 這是一個非常糟糕的主意，使用JavaScript的佈局，除非絕對必要，而對於這一點，肯定是沒有必要的。此外，請注意，您不能合併兩個div，只需設置#content {position:absolute; top:50%;}，因爲#pad必須具有正確的min-height，否則某些內容將隱藏在短於490像素的窗口中（本例中爲494px）。

來源

2012-02-02 13:23:44

鏈接到垂直對齊頁是這裏.... Here

只是瀏覽網頁源&你會知道該怎麼做的[垂直對齊的div（無表）]

來源

2012-02-02 17:11:11 Amol

對齊網站垂直中間的瀏覽器

回答

相關問題