個別記事

前後の記事

要素を常に画面の中央に配置

この記事が属するカテゴリー
CSS

これまた使い道があるのか微妙なんだけど、要素を常に画面の垂直、水平の中央に固定して配置させてみる。(X)HTML は下記のものを使用。

<div id="container">
  <img src="q.jpg" alt="Q-car" width="120" height="160" />
</div>

適用する CSS は下記の通り。ポイントは、要素の幅と高さそれぞれの半分の値をネガティブマージンで指定すること。

#container {
        position:absolute;
        width:120px;
        height:160px;
        left: 50%;
        top: 50%;
        margin-left: -60px;
        margin-top: -80px;
}

んでもって、実際のサンプル。ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているはず。

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

2005-06-21T16:21:17+09:00 | コメント (0) | トラックバック (2) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/253

このリストは、次のエントリーを参照しています: 要素を常に画面の中央に配置:

あの頃のように… さんからのトラックバック
任意の要素を常に（スクロールしても）画面の中央に配置
要素を常に画面の中央に配置先日のCSSで画像ポップアップに続いて再び弄ってみました。実用性は確かに微妙ですね。でも各所フォーラムを回っているとこの手の質問も少な... [続きを読む]
2005年06月22日 01:43
plugint-T さんからのトラックバック
CSSで画面の中央に配置する。
Flashを上下左右、どんなWindow幅の時にでも必ず画面の中央に配置したくて調べてみました。今回はそれをCSSで実現する方法を紹介したいと思います。 [続きを読む]
2007年07月05日 23:57

コメント

"要素を常に画面の中央に配置"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)