スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

任意の要素を常に(スクロールしても)画面の中央に配置

先日のCSSで画像ポップアップに続いて再び弄ってみました。実用性は確かに微妙ですね。でも各所フォーラムを回っているとこの手の質問も少なくないので意外と需要があるかもしれません。まあ大抵の場合はテーブルレイアウトで解決してしまう場合が多いのですが。

色々書くのはスペース的に無理がありますし、実際にこのページで表現するにしては事情が特殊なのでサンプルを置いておこうと思います。もちろん同じ物を書いてもただのパクリで何の意味も成さないので手を加えています。e-luckさんのサンプルでは、おそらくスクロールが生じた時に画面中央には表示されなくなってしまうと思うので、その辺りを中心に加工してみました(アイディアだけ貰って勝手に利用してしまってすいません)。最初に断って置きますが閲覧想定環境のみでしか確認していませんのでご注意下さい。

<p id="cent">
中央に表示させたい要素
</p>
<div id="waku">
fixedが効かないIE用の擬似bodyの様なもの
</div>
html,body {
    margin:0px;
    padding: 0px;
}
body {
    background:#fff;
    height: 100%;
    _overflow: hidden;
}
div#waku {
    overflow: auto;
    height: 100%;
}
p#cent {
    position:fixed;
    left: 50%;
    top: 50%;
    border: 1px solid blue;
    _position: absolute;
    width: 160px;
    height: 120px;
    margin-left: -80px;
    margin-top: -60px;
}

何の説明も無いのは不親切なので簡単に書きます。中央に表示させたい要素はp要素でなくても構いません。先ずはFirefoxやOpera向けに要素にfixedを当てています。しかしIEには効かないのでハックを利用してIEにのみabsoluteを与えます。この時に基準となるbody要素にheight:100%;を指定し、これまたハックを利用してoverflow: hidden;を指定します。しかしこのままではスクロールが不能になってしまうので、p要素以外の(別にp要素を含めても構いませんが)要素をdivで囲ってスクロールを出来るようにしてやります。

また、p要素にborderが付いているのはわかり易くする為なので必要はありません。htmlやbodyのmarginとpaddingも必要に応じて調整して下さい。p要素のwidthやheightはボックスとして認識させた方が、ずれることなく画面の中央に表示させる事が出来るからです。ネガティブマージンについてはLucky bagにも書いてありますが、left: 50%;やtop: 50%;はその要素が始まる位置を指定する物で、要素の内容が縦に伸びたり横に膨らんだりすると中央からズレてしまいます。そのために要素の大きさと、そのネガティブマージンを調整してやる必要があるのです。

これで説明は終わりですが、特にハックの箇所などを中心に、とてもスマートと呼べる代物ではありません。もっと上手く書く事も可能でしょう。こんな方法や書き方があるというトラックバックがあれば嬉しいなと思います。ついでに言えばあ、今確認したら Opera ではうまく行かないみたい。というのは私のサンプルでも同様です。どうやらOpera特有のバグらしく、似たようなものでこんなバグはあったのですが、それとは少し違って、絶対配置要素のtopプロパティの値を相対値にしても上手く動作しないという感じなのですが、誰かこの解決方法を教えて下さい。

スポンサーサイト

コメント一覧

どうもです

そうですね、実用性が微妙なんですけど、意外と拙サイトへも「垂直」「センター」などのキーワードでいらっしゃる方がいるんで、垂直センターにしたい状況はあるんでしょうね。いまいち理解できませんが;-P

はじめまして

どうも、お世話になっております。

> 垂直センターにしたい状況はあるんでしょうね。
> いまいち理解できませんが;-P

そのようですね。その必然性や必要性は不明ですけれども。
個人的にはそれほど美しくもなければ機能的でも無いと思いますし。
(しかもHTMLを直接弄ったりしない人達がやりたがる傾向にあるようなので始末に悪いです)

これからもアイディアを拝借させて頂く事があるかもしれませんが(もちろん節度は保つつもりです)
どうかお目こぼしのほどを宜しくお願い致します。

  • 2005年 06月 23日(木) 00:31:07 |
  • URL |
  • rara@執筆者#d3xRQPUk |
  • 編集 |
おばんです。(おっさんですが。

本文から
| あ、今確認したら Opera ではうまく行かないみたい。

8.01 で確認すると無問題でした。= 上手くいってます。(w

  • 2005年 06月 25日(土) 02:08:12 |
  • URL |
  • naka#upkHALyQ |
  • 編集 |
バージョンアップ

> 8.01 で確認すると無問題でした。

おお!そうですか。それは良い情報をありがとうございます。
私もそろそろバージョンアップさせようかと思いながらも時間が無くて渋っています。

なんでもIEの独自拡張だったスクロールバーのスタイルを
適応させる事(オン・オフ)も可能になったとかなんとか。
余計な対応のような気もしないでもないですが。(Opera精神っぽくない気がします)

  • 2005年 06月 25日(土) 02:32:38 |
  • URL |
  • rara@執筆者#d3xRQPUk |
  • 編集 |
承認待ちコメント

このコメントは管理者の承認待ちです

  • 2009年 03月 23日(月) 19:38:27 |
  • |
  • # |
  • 編集 |

コメントの投稿欄

Copyright © 2005 rara All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。