スタイルシートで

divの中に配置している
画像(img)を天地左右にするには
どのようにすればよいのでしょうか?

画像の大きさは、数種類あります。

どうぞよろしくお願いいたします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/08/27 23:56:00
  • 終了:--

回答(4件)

id:jouno No.1

jouno回答回数280ベストアンサー獲得回数02005/08/28 00:03:33

ポイント20pt

IE限定ですが、FlipHとFlipVをつかいます。

http://css.eweb-design.com/1021_fih.html

左右反転 (FlipH) - スタイルシート・フィルタ

id:ohtsu6

jouno さま

ありがとうございます。

ちょっと言葉足らずでした。

「天地左右」の中央にするでした。。。

反転できるなんてはじめて知りました。

今度使ってみます!

2005/08/28 00:25:22
id:sparituda No.2

sparituda回答回数57ベストアンサー獲得回数02005/08/28 00:58:11

ポイント20pt

左右の中央にするのは、文字と同じ。

 text-align: center;

上下は、DIVの中身がIMGタグだけなら、DIVと画像の高さは同じになるはずで、中央というか上下の隙間はありません。DIVの高さが画像より大きく指定してあると、画像は上端に配置されます。

DIVではなく、TABLEのTDの中にIMGがあれば、上下左右の中央にする事は出来ます。これと同じ方法は、DIVでは使えない様です。

 text-align: center;

 vertical-align: middle;


どうしてもDIVでやりたい場合は、IMGの上に隙間を作るためのDIVを配置し、IMGが中央に来る様に高さを調整します。ただし、画像の大きさが可変の場合は、javascriptで画像の大きさを調べて、隙間用DIVの高さを動的に変更する必要があります。


私は、思いつきませんが、もっと簡単にできるかもしれません。

id:ohtsu6

sparituda さま

どうもありがとうございます。

やはりTABLEが

一番楽にできるみたいですね。

他にも、やり方をご存知の方がおりましたら

どうぞよろしくお願いします。

2005/08/28 12:34:44
id:MIYATOMO No.3

MIYATOMO回答回数9ベストアンサー獲得回数02005/08/28 14:30:21

ポイント20pt

http://www.1uphp.com/con2/layout/center.html

ホームページ作成 - 範囲を中央に表示する(センタリング) - WEBサイト作成 フリー素材コード の1uphp.com スタイルシート,htmlやFirefox,Operaなどのブラウザの表示結果まで。

http://www.1uphp.com/con2/layout/center.html

ここの範囲を中央に寄せる方法の中に入れては?

http://www.1uphp.com/con1/img/background-position.html

↑また、背景画像として設置して場所を指定する方法はピクセル単位での調整が可能になりますよ。

http://www.1uphp.com/con1/img/background-position.html

ホームページ作成 - 背景画像の場所を指定する

id:ohtsu6

MIYATOMOさま

どもありがとうござます。

教えていただいたサイトですが、

ブラウザ別にのっており参考になりました。

ちなみに縦方向も中央になる方法って

ありますでしょうか?

2005/08/28 20:28:48
id:jouno No.4

jouno回答回数280ベストアンサー獲得回数02005/08/28 19:18:15

ポイント100pt

http://digibot.jp/blog/archives/2004/09/css_5.html

WEBFACTORY ::: BLOG: CSSでボックス中央(ど真ん中)配置

ぴったりの回答がありました。

なお、text-alignでの画像の位置指定は本来はバグなので、ブラウザによっては機能しないこともあるかもしれません。

http://www.stylesheet-stylebook.com/wiki/index.php?cmd=read&...

スタイルシート・スタイルブック - 有効なWikiNameではありません

id:ohtsu6

jouno さま

どうもありがとうございます。

確かにできるようになりました。

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

2005/08/28 23:38:53
  • id:sparituda
    画像の大きさが固定なら...

    最後の回答、画像の高さが解っていないと、無理ですよね。
    質問には「画像の大きさは、数種類あります。」とあったので、個別に画像の大きさ調べて、画像の大きさに基づく値を設定するのが困難なのだと思いましたが、画像の大きさを固定できるなら、DIVにpaddingを指定すれば、中央に配置できます。
    画像の高さ=Hi(px)、DIVの高さ=Hd(px)として、次の様に計算した値を指定します。
     padding-top: (Hd-Hi)/2px;
     padding-bottom: (Hd-Hi)/2px;
    ここで、DIVの高さ(height)を指定しなければ、DIVの高さは、
     (Hd-Hi)/2+Hi+(Hd-Hi)/2
    となり、希望の高さHdになります。厳密にするには、ピクセル単位の微調整が必要かと思いますが。なお、左右も同様の方法でOKですが、今の所、text-align: centerの方が簡単。
    paddingで中央に持ってくるのも、W3C非標準なのかな?とりあえず、MacOS X環境で、SafariとIE5.2はOKです。

    回答の方では、空のDIVで隙間を作る様なこと書きましたが、paddingで事足りそうです。
  • id:sparituda
    訂正

    >なお、左右も同様の方法でOKですが、今の所、text-align: centerの方が簡単。
    左右は、ダメでした。width指定しないと、幅が狭くなりません。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません