- ベストアンサー
CSSによるセンターよせについて
<div> <p> 真ん中に寄せたいコンテンツ </p> </div> のように</p>部分を<div>の真ん中に寄せたい場合、 div { width:400px; } div p{ margin-left:auto; margin-right:auto; } で実現できるとおもうのですがこれだとmargin: autoの利かない IE6では真ん中によりません。 そこで、IE6用に div { width:400px; text-algin: center; } div p{ margin-left:auto; margin-right:auto; } と text-algin:center を施すわけですが 複数のブラウザに対応させようとおもったら、 常にtext-alginとmarginで２パターンのセンター寄せの 記述をしないといけないのでしょうか。 もしくは、 <table algin='center'><tr><td> <p> 真ん中に寄せたいコンテンツ </p> </td></tr></table> のようにテーブルを使わないといけないのでしょうか。 もっとシンプルにいろんなブラウザに対応したセンター寄せ方法があれば アドバイスお願いします。
- yuzuru0024
- お礼率86% (557/646)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
IE6でmarginのautoがきかないとのことですが、DOCTYPEは正しく設定されていますか？ 正しく設定されていないと互換モードになりmarginのautoがきかないようです。 また、提示された内容では<p>要素にwidthが設定されていませんが、これだと親要素とwidthが同じになるため、marginが結果的に0になると思われます。 <p>要素の幅が固定できない場合、text-alignを使うのが確実かもしれませんね。 また、ボックス要素をmarginでセンター寄せしても、ボックス要素の中身はセンター寄せされませんのでご注意を。 今回の場合、<p>要素の中身もセンター寄せにしたければ<p>要素にtext-alignを指定してやる必要があります。
その他の回答 (3)
- os6v100i
- ベストアンサー率44% (16/36)
No.2です。 DOCTYPEを <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml4/DTD/loose.dtd"> とすることでIE6でも標準モードになります。 これで外側のDIVにtext-alignは必要なくなります。 結局のところ、どういう構造で、どういう見た目にしたいのかでアプローチは変わると思います。 外側の<div>内のコンテンツ全てをセンターによせたいのであれば、親要素である<div>にtext-alignを指定すればいいですし、 いくつかの要素があり、それぞれに異なる設定が必要なら、それにあわせて記述すればいいかと。
お礼
回答ありがとうございます。 継承をうまく利用していくということですね。 個別に指定するにしても、デフォルトとして text-alignをセンターなり、左寄せなりしといてもいい訳ですし・・・。
div { text-align:center; } div p { display:inline-block !important; display:-moz-inline-box !important; display:inline; } 記述的な長さはあまり代わらないので独自拡張を使わないtext-alginとの併用の方がおすすめです。 その他inline-boxを使うメリットとしては、margin:0 auto;を指定した要素にはwidthの指定も必要になるのですがこの方法では内容によって自動的にボックスを拡張してくれる点です。
お礼
回答ありがとうございます。 ＞text-alginとの併用の方がおすすめ ということは、やはりtext-alginとmarginの ２パターン記述するしかないのですね・・・。 inlineは単純に<p>を<span>とかにしてもよさそうですね。
- nori_007
- ベストアンサー率35% (369/1048)
以下の通りにしたらどうでしょうか。 div { width:400px; text-algin: center; margin-left:auto; margin-right:auto; } div p{ text-algin: left; }
お礼
回答ありがとうございます。 これでは、外枠のdivも真ん中になってしまいませんか？
お礼
回答ありがとうございます。 DOCTYPEスイッチで、CSSの解釈が相当変わるのですね。 現在編集しているファイルのDOCTYPEスイッチは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> で、ＩＥは、互換モードでした。 ＞ボックス要素をmarginでセンター寄せしても、 ＞ボックス要素の中身はセンター寄せされませんので 箱は真ん中に来るけど、その中に書かれている文字や、 要素は真ん中にこないということですね。 ということは、ボックスを真ん中に来さすための margin: auto;と ボックスの中に書かれている文字等を真ん中に来さすための text-align: center;の ２つが結局必要となるわけですね。 しかも、互換モードＩＥとなるとさらに、真ん中にしたいボックスの 外箱にtext-align: center;が必要になり・・・ ・・・ややこしいですね。