- ベストアンサー
アイフレームについての課題：画像をセンタリングしてページの真ん中に寄せる方法は？
- 現在、HP作成中でアイフレームを使用していますが、画像をセンタリングしてページの真ん中に寄せる方法がわかりません。
- 検索しても解決策が見つからなかったため、質問させていただきます。
- アイフレームに関して詳しい方、ご教示いただければ幸いです。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと整理を・・・ 520*350のdiv領域を画面中央に配置するのでしょうか？ それともdiv領域内の背景画像(top.gif)のみをこの520*350の中央に配置するのでしょうか？ 後者であれば #top{ }内に background-repeat:no-repeat; background-position: 50% 50%; を付け加えれば良いかと 前者であれば(今の段階で横はセンタリングされてます（？）よね） #top{ }内に margin-top:***px; （数値は微調整してください）を入れれば良いかと 横位置がセンタリングされてないなら margin:auto;を消して margin-left:***px; で調整
その他の回答 (2)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 画像(top.gif)・・・つまりdiv領域をセンタリングしたいということですか？ それであれば『margin:auto』を使えばできますよ（＾＾） <head><title><title> <style type="text/css"> <!-- #top{ background-image:url("img/top.gif"); width:520px; height:350px; margin:auto; } iframe{ width:296px; height:178px; margin-left:180px; margin-top:71px; scrolling:yes; allowtransparency:true; } /--> </style> </head><body> <div id="top"> <iframe src="menu.html" name="menu" frameborder="0"></iframe> </div> ちなみに『allowtransparency:true;』 firefoxでは背景透明になったのですがIE6.0とOperaではできませんでした（＞＜）
補足
回答ありがとうございます。 記載していただいたタグをコピペしてみましたが 左上に配置されたままです。 画像は画面に対して小さいので その画像を縦横共にセンタリングしたいのです。 それはｄｉｖ領域のセンタリングという解釈で 合ってますでしょうか？ こうなったらBRを入れて調節するしかないのか 初心者的な考えが悶々と浮かびます(ノд`゜)゜・゜
- masakin
- ベストアンサー率59% (32/54)
<div style="background:url(img/top.gif);width:520px;height:350px;text-align:center;"> を <div style="background:url(img/top.gif) no-repeat center;width:520px;height:350px;text-align:center;"> とするとどうでしょうか？ text-alignはバックグラウンドには影響しません。
補足
回答ありがとございます。 記載していただいたタグでも反映されませんでした。 できないのでしょうか・・・ ちなみに、ｄｉｖの前に単純に＜CENTER＞を つけると横位置はセンタリングされるのですが 縦方向にはされませんでした。
お礼
leap_dayさんありがとうございました！ おかげで、アイフレレイアウト完成しました。 ご教授本当に助かりました。
補足
お返事が遅くなり申し訳ありません！ えっと、520*350の画像を作成し、その画像上に アイフレを乗せています。 そして、その画像ごとを画面中央に配置したいのです。 ですので前者だと思われます。 （曖昧ですみません・・・） アイフレを乗せるところまではうまく行ってますが あとは真ん中に寄せるだけ！！とうい段階です。 今ちょっとテストできないので、今夜上記タグを 試してみます！！