Webのデザインを行っているのですが、以下のような事象に困っています。ブラウザはGoogle chromeです。あいうえおこれは中央寄せになるのです。しかし、あいうえおこうすると、中央寄せが解除されてしまいます。どうしてこうなるのでしょうか？出来れば理由も含めて理解したいのですが、教えて頂けないでしょうか。

divタグを中央寄せでwidthを指定したい。

解決済

質問者：inomatajin
質問日時：2011/10/18 10:37
回答数：2件

Webのデザインを行っているのですが、以下のような事象に困っています。
ブラウザはGoogle chromeです。

<body>
<div style="text-align:center;">
あいうえお
</div>
</body>

これは中央寄せになるのです。しかし、

<body>
<div style="text-align:center;width:400px;">
あいうえお
</div>
</body>

こうすると、中央寄せが解除されてしまいます。
どうしてこうなるのでしょうか？
出来れば理由も含めて理解したいのですが、教えて頂けないでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2011/10/18 10:55

<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">
となります。

- 5
- 件

通報する

No.1

回答者： noname#158634
回答日時：2011/10/18 10:53

＞こうすると、中央寄せが解除されてしまいます。

そんなわけがない。
もし本当にそんな現象が発生するならそれは別の原因。
というか、タイトルでは
＞divタグを中央寄せでwidthを指定したい。
になってますが…センタリングしたいのはテキストとボックスのどちらなんですか？
もしボックスならスタイルの使い方が間違ってます。

あと。
今は勉強中なんだろうから別にスルーしますけど、最終的にはスタイルはちゃんと別ファイルにしてくださいね。

この回答への補足

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

補足日時：2011/10/18 11:02

通報する