並んでいるiframeを両方センタリングするにはどうすればいいのでしょうか?

iframeを２つ並べて表示したいのですが、

alainや<center>を使ってもどうしても片一方しかセンタリングされません。

以下に本文を記載させていただきます。

style type="text/css">

.main { margin:10px 0; }
.main iframe { margin: 0 auto; display: block; }

</style> <div class=”main”> <iframe src="○○○○○○○○○○○○○○○○.html" scrolling="no" width="1000" height="220" frameborder="0" > インラインフレーム対応ブラウザでご覧いただけます。 </iframe></div> <div class=”main”> <iframe src="△△△△△△△△△△△△△△△△.html" width="1250px" height="80px" frameborder="0" scrolling="no" marginwidth="0"></iframe></div>

行動規範の内容に同意します

回答2件

ベストアンサー

ちょっとソースをいじってみました

http://www.rakuten.co.jp/attractgolf/

![イメージ説明]WIDTH:600

まず、検索窓の上のsaleとフォーティーン最新ツアーウェッジという部分のiframeがずれていたので
その上の.mainにtext-align:center;を使って下さい。
これで上の部分が中央によります。

そしてそのしたの検索窓と、楽天ツールバーに関してですが、まず.mainにtext-align:center;をiframeにdisplay:inline-block;を指定してください
そのあと、iframeのまわりにborderをつけてみたところ下の画像のようになります。

おそらく、iframeがずれているのではなくiframeの中で読み込んでいるページ内で表示が崩れているようです。
ご確認をお願い致します！

投稿2015/04/09 07:57

MasakazuFukami

総合スコア1869

nanasi

2015/04/10 01:43

回答ありがとうございます！ソースとしては <style type="text/css"> .main { margin:10px 0; text-align:center;} .main iframe { margin: 0 auto; display:inline-block; } </style> <div class="main"> <iframe src="http://www.rakuten.ne.jp/gold/attractgolf/headder.html" scrolling="no" width="1000" height="220" frameborder="0" > インラインフレーム対応ブラウザでご覧いただけます。 </iframe></div> <div class="main"> <iframe src="http://www.rakuten.ne.jp/gold/attractgolf/kensaku-koukoku.html" width="1250px" height="80px" frameborder="0" scrolling="no" marginwidth="0"></iframe></div> これであってますか？合ってなかったら理解不足で申し訳ないです。

MasakazuFukami

2015/04/10 05:12

解答遅くなりました。 .main { margin:10px 0; text-align:center;} .main iframe {display:inline-block; } これで.mainのdivタグないのiframeを中央に寄せることが出来ます。ただ、iframe内のファイル内でちょっと表示がおかしくなっている（「検索」という文字にバナーがかぶっていたりする）のでそこは調整の必要があると思います！

nanasi

2015/04/10 06:08

MasakazuFukami

2015/04/10 06:14

えっと。 iframe自体は真ん中に来ているのですが、下のiframeの長さが1250pxと指定してあるのに対し、 iframeの中に入っている検索の部分と、画像がスライドしてくる部分を足しても975pxしかありません。つまり 1250pxのiframeは画面の中央にありますが、iframeの中身が左によっているために中央に揃っていないように見えているだけです。例えば、下のiframeのwidthを975pxにすると中央によると思います！お試し下さい！

nanasi

2015/04/10 06:45

やっと理解できました！！！ほんっとにありがとうございました！！

MasakazuFukami

2015/04/10 06:45

よかったです！！！頑張ってください！！！

MasakazuFukami

2015/04/10 06:48

あ、あとよかったらベストアンサーお願いします！（笑）

行動規範の内容に同意します

縦に２つ並べるなら上のコードで出来てます
![イメージ説明]WIDTH:600
外枠がdiv.main, 内側の四角がiframeになります。

横に２つ並べる場合はiframeが1000pxと1250pxで大きいので500pxと625pxで考えると

lang
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3<head>
4<meta charset="utf-8">
5<style type="text/css">
6.main {
7	display: table;
8	width: 100%;
9	margin:10px 0;
10	text-align: center;
11}
12
13.main-inner{
14	display: table-cell;
15}
16.main iframe{
17	display: inline-block;
18	vertical-align: middle;
19}
20</style>
21</head>
22<body>
23  <div class='main'style="border:solid 1px #999;">
24    <iframe src="○○○.html" scrolling="no" width="500" height="220" frameborder="0" style="border:solid 1px #999;"></iframe>
25    <iframe src="xxx.html" width="625" height="80" frameborder="0" scrolling="no" marginwidth="0"style="border:solid 1px #999;"></iframe>
26  </div>
27</body>
28</html>