人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: ohtsu6
●カテゴリ:ウェブ制作
✍キーワード:スタイルシート 画像
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● jouno
●20ポイント

http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/co...

MSDN Online Japan : File Not Found

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

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

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

◎質問者からの返答

jouno さま

ありがとうございます。

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

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

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

今度使ってみます!


2 ● sparituda
●20ポイント

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

text-align: center;

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

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

text-align: center;

vertical-align: middle;


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


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

◎質問者からの返答

sparituda さま

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

やはりTABLEが

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

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

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


3 ● MIYATOMO
●20ポイント

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

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

◎質問者からの返答

MIYATOMOさま

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

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

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

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

ありますでしょうか?


4 ● jouno
●100ポイント

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ではありません

◎質問者からの返答

jouno さま

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ