2

私は退屈からウェブサイトをいじり回していて、ラップを垂直に揃える方法を見つけようとしていますが、それは私が失敗しています。私はすでにそれを水平に整列させました、そしてただそれを垂直に整列させる助けが必要です。（はい、vertical-align：middleを試しましたが、機能しません）。

    * { 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>
4

4 に答える 4

2

古いブラウザーをサポートする必要がない場合は、ディスプレイ ボックスを使用できます。私は次のクラスを持っています：

.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;
}

次に、そこに何でも入れます。「ラップ」div を垂直方向に中央揃えにする必要があるため、vertical_centered クラスを body 要素に割り当ててみてください。

フレキシブル ボックスの使用に関する詳細については、次の記事をご覧ください: http://www.css3.info/introducing-the-flexible-box-layout-module/

于 2012-04-21T01:55:17.817 に答える
1

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

まず、動作中の js フィドルを示します。ラップの中身をラップの中心に！（私が誤解していて、ラップ自体を中央に配置する必要がある場合は、質問して編集します）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>​
于 2012-04-21T01:38:24.297 に答える
1

div オブジェクトを垂直方向に揃えたい場合は、次のように position:relative と top 値を使用します。

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

#wrap div 内のテキストを動的上付き文字などの特定の垂直方向の配置で揃える場合は、テキスト コンテナーで vertical-align を使用します。

#wrap span {font-size:14px; line-height:16px; vertical-align:2px;}
于 2012-04-21T01:52:23.170 に答える
0

あなたの質問は、この投稿で議論されている問題そのものです。

方法 1

次の例では、2 つの (自明ではない) 仮定を行います。これらの前提を満たすことができる場合は、この方法が適しています。

  1. 中央に配置するコンテンツをブロック内に配置し、その内側のコンテンツ ブロックに固定の高さを指定できます。
  2. このコンテンツを絶対位置に配置しても問題ありません。(コンテンツが中央に配置されている親要素がまだフロー内にある可能性があるため、通常は問題ありません。

上記の必要性を受け入れることができる場合、解決策は次のとおりです。

  1. 親コンテナーを position:relative または position:absolute として指定します。
  2. 子コンテナーに固定の高さを指定します。
  3. 子コンテナーで position:absolute および top:50% を設定して、親の中央に上を移動します。
  4. margin-top:-yy を設定します。ここで、yy は子コンテナーの高さの半分で、アイテムを上にオフセットします。

...

方法 2

この方法では、次の条件を満たす必要があります。

  1. 中央に配置するテキストは 1 行だけです。
  2. 親要素に固定の高さを指定できます。

上記の必要性を受け入れることができる場合、解決策は次のとおりです。

  1. 親要素の行の高さを必要な固定の高さに設定します。

方法 2 は一般的に最も簡単で最も一貫した垂直方向の配置方法であることがわかりますが、これは 1 行に限定されていますが、垂直方向の配置のニーズのほとんどはとにかく 1 行しか必要としないメニュー項目のためのものであるため、通常はこれで問題ありません。

于 2012-04-21T02:11:49.053 に答える