Amazonアソシエイトのiframeのリンクを中央に配置する方法

Amazonアソシエイトで作成したアフィリエイトリンクはiframeなんですけど、普通に記事内に配置するとこんな感じで左に寄ってしまうんですよね。

左に寄ったiframe

iframeは通常左に寄ってしまう

技術的な説明をすると、iframeはinline frameの省略だけあって、inline要素だからです。せっかくの目立たせたい商品なので、中央に配置したいところです。

調べてみたところ、周りをdivタグで囲って、text-align: center;を設定しようという解決策が多かったです。

確かにそれで中央にきますが、ただ中央寄せにしたいだけなのに、divタグ増やしたくないですよね。そんな方は以下のCSSをiframeに適用することで、中央寄せにすることができます。

CSSでiframeをblock要素にすれば中央に寄る

このCSSのクラスを、

1
2
3
4
.center_iframe{
  display: block;
  margin: auto;
}

Amazonアソシエイトで取得したiframeに下のように適用させましょう。

1
<iframe class="center_iframe" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=xxxxxxxxx-22&o=9&p=8&l=as1&asins=4797372273&ref=qf_sp_asin_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe><br/>

すると下のように見事に中央に揃います。

中央に揃った様子

参考

羊毛や小麦