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

これまた使い道があるのか微妙なんだけど、要素を常に画面の垂直、水平の中央に固定して配置させてみる。(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;
}

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

centering.html

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

この記事についての情報

公開日

2005-06-21T16:21:17+09:00

URI

https://www.lucky-bag.com/archives/2005/06/centering.html

カテゴリ

タグ

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/140

あの頃のように… - 任意の要素を常に（スクロールしても）画面の中央に配置 (2005年6月22日 01:43): 要素を常に画面の中央に配置先日のCSSで画像ポップアップに続いて再び弄ってみました。実用性は確かに微妙ですね。でも各所フォーラムを回っているとこの手の質問も少な... 続きを読む

plugint-T - CSSで画面の中央に配置する。 (2007年7月 5日 23:57): Flashを上下左右、どんなWindow幅の時にでも必ず画面の中央に配置したくて調べてみました。今回はそれをCSSで実現する方法を紹介したいと思います。続きを読む

Comments

サイトのご案内