縦型アライメントラッパー

Question

私は退屈しているウェブサイトをめちゃくちゃうどんしていて、自分のラップを縦に整列させる方法を見つけようとしています。私はすでにそれを水平に整列させて、それを垂直に整列させるのに役立つだけです。 （はい、私は垂直整列を試みました：中、それは動作しません）。

* { margin:0; padding:0; } 
    html { height:100%; } 
    body { background:/*url(images/bg.jpg)*/#14181a; } 
    #wrap { width:960px; height:55%; margin:0 auto; background:#293033; } 

    <div id="wrap"> 
    <div id="logo"></div> 
    <div id="navgation"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
    </div> 

Answer 1

テーブルレイアウトを使用して垂直方向の配置を行うことができます。テーブルセルとして表示する要素が必要であり、その親がテーブルとして表示される必要があります。次に、垂直方向の配置を追加することができます。

まず、実際の動作を示すjsフィドルがあります。それはラップの内容をラップの中に集中させます。相対トップ値のように、：あなたがしたい場合は位置、DIVオブジェクトを垂直揃え使うhttp://jsfiddle.net/YWdDC/1/

* { margin:0; padding:0; } 
    html { height:100%; } 
    .wrap-wrapper { 
     background: url('images/bg.jpg') #14181a; 
     display: table; 
    } 
    .wrap { 
     width:960px; 
     height:300px; 
     margin:0 auto; 
     background:#293033; 
     display: table-cell; 
     vertical-align: middle; 
    }​ 

    <div class="wrap-wrapper"> 
     <div class="wrap"> 
      <div id="logo">Logo</div> 
      <div id="navgation">Nav</div> 
      <div id="content">Content</div> 
      <div id="footer">Footer</div> 
     </div> 
    </div>​ 

Answer 2

（私が誤解してあなただけ聞いて、ラップ自体を中央にする必要があり、私が編集します場合）そう：

#wrap {width:960px; height:55%; margin:0 auto; background:#293033; position:relative; top:20px;} 

あなたは、このようなダイナミックな上付き文字などの特定の垂直方向の配置、と#wrap div要素内のテキストを揃えたい場合は、縦揃えテキストコンテナ上を使用します。

#wrap span {font-size:14px; line-height:16px; vertical-align:2px;} 

Answer 3

の場合古いブラウザをサポートする必要はありませんが、表示ボックスを使用することができます。私は次のクラスを持っています：

.vertically_centered { 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 

    display: -moz-box; 
    -moz-box-orient: horizontal; 
    -moz-box-pack: center; 
    -moz-box-align: center; 

    display: box; 
    box-orient: horizontal; 
    box-pack: center; 
    box-align: center; 
} 

そこに何かを入れてください。 "wrap" divを垂直にセンタリングしたいので、vertical_centeredクラスをbody要素に割り当ててみてください。

柔軟ボックスを使用しての詳細については、この記事をチェックアウトする場合があります：http://www.css3.info/introducing-the-flexible-box-layout-module/

Answer 4

あなたの質問はthis postで議論正確な問題です。

方法1

次の例は、2つの（非自明な）仮定を行います。あなたは これらの仮定を満たすことができる場合、この方法はあなたのためです：

1. あなたはブロック内で中心部とその内側のコンテンツブロックの固定の高さを指定したいコンテンツを置くことができます。
2. このコンテンツを絶対に配置することは大丈夫です。コンテンツを中心とした内部の親要素がまだ流れにすることができるので、（通常は細かい

あなたは上記の必需品を受け入れることができれば、解決策は次のとおりです。

1. は位置として親コンテナを指定します：相対的又は位置：絶対
2. 子コンテナに固定された高さを指定
3. セット位置：絶対およびトップ：50％の子コンテナに親の中央に上面を下に移動し
4. 。セットm argin-top：-yyここで、yyはアイテムを上にオフセットする子コンテナの高さの半分です。

...

方法2

この方法では、次の な条件を満たすことができることが必要です：

1. あなたがしたいテキスト1行だけを持っています中心に
2. 親要素に固定高さを指定できます。

あなたは上記の必需品を受け入れることができれば、解決策は以下のとおりです。

1. したい固定高さに親要素の行の高さを設定します。私は垂直配向ニーズのほとんどが唯一のメニュー項目のためのものであるので、それは通常、結構です、単一の行、に制限されているが、方法2は、一般的に、垂直整列する最も単純かつ一貫した方法で見つける

とにかく1本のラインが必要です。