CSSでjavascriptが中央寄せにならない

質問

楽天モーションウィジェットをブログに掲載して、
cssでtext-align:center;を指定しました。

文字は中央に寄るのですが、
ウィジェットの部分は左寄せのままです。

これはもう諦めるしかないのでしょうか？
よろしくお願い致します。

回答No.2

ORUKA1951 · ベストアンサー

まず、ウィジェットのソースを確認する。ページが描画された後のソースでないとわからないでしょう。firefox+fireBugを使うと良い。

　たとえば、javascriptが書き出す部分を含むdiv(汎用ブロック)に、margin:0 auto;とborder:solid 1px red;を指定すると、そのdivが中心に配置されていることがわかると思います。
　それはあくまで、コンテナブロックの配置ですから、そのjavascriptの出力するHTML要素がブロックだとしても、それは中央には配置しません。ここは理解されていますか？
　marginは継承しないので、その子孫には適用されません。
→Inherited: no ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#propdef-margin )

　ウィジェットの大きさが決められていれば--たとえばそれがobject要素でwidthが決められていれば、それが収まる大きさにdivのサイズを決めるか、行内要素であれば、display:block;でブロック要素にして、marginを設定するとかです。
→ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )
→ボックスの生成を制御する ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#propdef-display )

お礼

わかりやすいご説明ありがとうございました！
無事解決できました。

回答No.1

LOHA

通常、インライン要素（文章とか）はtext-align:center;で中央に寄りますが、ブロック要素（divとか）の場合はmargin-right: auto; margin-left: auto;を指定する必要があります。

＞CSSでjavascriptが中央寄せにならない

なかなかビックリな表現ですね。
JavaScriptとウィジェットは全然意味合いが違います。
それぞれどんなものなのか興味があれば一度調べてみると良いでしょう。

補足

色々とありがとうございます！

<div style="margin-right: auto; margin-left: auto;">
ウィジェットタグ
</div>

でもやっぱり左寄せのままになってしまいます！