3

マイページは画面の高さの 2 倍です (サイズはページの他の項目によって異なります)。スクロール位置に関係なく、画面の中央に絶対配置された SPAN を表示したい。

ボタンのクリック時に次のスタイルを適用しますが、一番下までスクロールすると、ページ全体の上部から 50% をカウントするため、要素がページの一番上に表示されます。

.Centered {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 45%;
}

ボタンクリック時のスクロール部分に基づいて、要素をページの中央に配置するにはどうすればよいですか?

ありがとうございました。

4

3 に答える 3

19

固定位置を使用しないでよろしいですか?

絶対配置では、アイテムがページのコンテキスト内に配置されるため、ページとともに上下にスクロールします。固定配置では、アイテムはビューポートのコンテキスト内に配置されるため、ページと共に移動しません。代わりに、どのようにスクロールしても同じ位置に留まります。

.Centered
{
  width:100%;
  position:fixed;
  top:50%;
  left:45%;
}

このページのメニューは、固定配置の良い例です。

于 2009-02-26T07:23:03.110 に答える
0 
.Centered 
{
    position:absolute;   
    width:100%;
    top:50%;
    left:50%;
    margin-height: -200px;
    max-height: 400px;
}

このようにして、トリックはmax-heightの適切な値を見つけるようになります。

于 2009-02-26T07:00:15.847 に答える
-1

jQuery センター プラグインを使用してみてください。

于 2009-02-26T07:37:37.443 に答える