2

これを見てください：http://sources.freehosting.bg/landing.html

#content を縦方向に揃えようとしているので、大きい解像度 (1920x1200) と小さい解像度 (1024x768) で見栄えがします。つまり、スクロールバーがないということです。ご覧のとおり、十分な空き領域があるため、スクロールバーは不要です。

私が思いついた唯一の解決策は、#content の高さを JS で計算し、パディングを設定することですが、それが最も不十分な解決策であることに気付きました。

それを達成する方法を教えてください。

4

4 に答える 4

2

このフィドルが探しているものかどうかを確認してください。シンプルなソリューションIMO。

コンテナを強制的にdivとして動作させ、スタイルtable-cellを利用することで機能します。vertical-align: middle要素の高さを知る必要はまったくありません。

フィドルで使用されるコードは以下のとおりです。

HTML:

<div class="a">
    text inside div a
    <div class="b">
        text inside div b
    </div>
</div>

重要なスタイルは次のとおりです。

display: table-cell 
vertical-align: middle

残りはデモンストレーションのためだけにあります。CSS:

div.a {
    border: 1px solid red;
}
div.b {
    border: 1px solid blue;
    height: 200px;
    display:table-cell;
    vertical-align:middle;
}
于 2012-08-01T13:23:00.403 に答える
0

JavaScript を使用せず、コンテンツの高さを知らずにこれを行う方法が 1 つありますが、純粋主義者はそれを好まないでしょう。繰り返しになりますが、トレンディな人々に承認されていなくても問題ない場合があります. 上司がそのように望んでいるので、必要なのは仕事を終わらせることだけである場合があります。

そして解決策は、テーブルを使用することです（純粋主義者はそれを好まないと言いました）。古い学校の方法でレイアウトし、HTML がテーブルに多くの機能を指定するという事実を悪用します。

表のセルは、ほとんどの人が期待する垂直方向の配置属性を持つ唯一の HTML 要素です。テーブルの幅と高さを 100% にして (ウィンドウ サイズに合わせて拡大します)、セルの配置を使用して必要なコンテンツを配置します。

私は一度だけこのトリックを使ったことがありますが、今でも汚れているように感じます*。

*注: 私自身は純粋主義者ですが、男性は男性がしなければならないことをしなければならない場合があることを理解しています。

于 2012-08-02T08:11:37.753 に答える
0

コンテンツの高さが固定されている場合は、コンテンツの前に div を配置します

<div id="distance"></div>
<div id="content">
  Vertically centered :D
</div>

次のようにスタイルします。

html, body {
height:100%;
margin:0;
padding:0;
}

div#distance {
width:1px;
height:50%;
margin-bottom:-300px; /* half of website height */
float:left;
}

div#content {
text-align:left;
margin:auto;
position: relative;
width: 950px;
height: 600px;
clear: left;
}

</p>

于 2012-08-01T12:52:42.877 に答える
0

私が知っている唯一の方法は、純粋なCSSを使用し、JSやハックを使用せずに、配置しようとしているものの高さを知る必要があります。

<html>
  <head>
    <style type="text/css">
      /* Give your document height */
      body, #content {
        height: 100%;
      }

      /* Give your element height */
      .thing {
        width: 20px;
        height: 300px;
        background: #000;
      }
      /* Position thing */
      #content .thing {
        position: absolute;
        top: 50%;
        margin-top: -150px; /* half the height of the thing */
      }
    </style>
  </head>
  <body>
    <div id="content">
       <div class="thing"></div>
    </div>
  </body>
</html>

編集: アイテムの高さ、コンテナー ID を更新しました。それでも問題なく動作します。

于 2012-08-01T13:46:18.523 に答える