divタグの中央寄せとwidth指定の関係について

2011/10/18 10:37

このQ&Aのポイント

divタグを中央寄せする方法として、text-align:center;を使用します。
しかし、divタグにwidthを指定すると、中央寄せが解除されます。
この仕様は、ブラウザの挙動によるものであり、理由は詳しくは分かっていません。

inomatajin
お礼率41% (25/60)

HTML
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/10/18 10:55 回答No.2

<body> <div style="text-align:center;"> あいうえお </div> </body> は、汎用「ブロック内のテキストを中央寄せにしなさい」と言う意味です。ブロック自体の巾はウィンドウ巾 <body> <div style="text-align:center;width:400px;"> あいうえお </div> </body> 汎用「ブロック内のテキストを中央寄せにしなさい」と言う意味です。ブロック自体の巾は400pxになります。「中央寄せが解除され」ていません。　ブロック自体を中央に配置したい場合は <div style="width:400px;margin-right:auto;margin-right:auto;"> ・・・marginは一括指定できますから <div style="width:400px;margin:0 auto;"> と書けます。さらにテキストも中央配置する場合は <div style="width:400px;margin:0 auto;text-align:center"> となります。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

noname#158634

2011/10/18 10:53 回答No.1

＞こうすると、中央寄せが解除されてしまいます。そんなわけがない。もし本当にそんな現象が発生するならそれは別の原因。というか、タイトルでは＞divタグを中央寄せでwidthを指定したい。になってますが…センタリングしたいのはテキストとボックスのどちらなんですか？もしボックスならスタイルの使い方が間違ってます。あと。今は勉強中なんだろうから別にスルーしますけど、最終的にはスタイルはちゃんと別ファイルにしてくださいね。

質問者

補足 2011/10/18 11:02

そんなわけがありました。その原因を質問しています。ボックスを中央寄せしたかったんですが、仰る通り間違えてましたね。 http://www.mozilla.gr.jp/standards/webtips0004.html あと、別ファイルにしてしまうと質問に書いたときに表現しづらくなるので、やむを得ずstyleで書いてます。

ログインすると、全ての回答が全文表示されます。