ウェブサイトをブラウザの真ん中に合わせる

-2

私は高さ490pxのウェブサイトを持っています。私はウェブサイト全体をブラウザの垂直方向の中央に移動する必要があります。ウェブサイトをブラウザの真ん中に合わせる

何か提案！

2012-02-02 Sowmya

が重複する可能性を行う方法を知って来る&

Hereだけでページのソースを見る....ここにありますhttp://stackoverflow.com/questions/1909753/vertically-align-div-no-tables）と何百もの他の何百ものこことSOとインターネット。 – Rob

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

出典

2012-02-02 12:45:51 melanke

私は水平線でない垂直整列が必要 – Sowmya

私の間違いは、srry – melanke

チル.. – Sowmya

<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を使用することは非常に悪いアイデアだし、このために、それは確かに必要はありません。また、2つのdivを組み合わせることはできません。#content {position:absolute; top:50%;}を設定することができます.#padには正しいmin-heightが含まれている必要があります。そうでないと、490px（例では494px）より短いウィンドウに表示されます。垂直配向ページへ

出典

2012-02-02 13:23:44

リンクは、あなたが（それを[縦のdivを（なしのテーブル）揃える]の

出典

2012-02-02 17:11:11 Amol

ウェブサイトをブラウザの真ん中に合わせる

答えて

関連する問題