• ベストアンサー
  • 困ってます

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

  • 質問No.7078987
  • 閲覧数7606
  • ありがとう数1
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 41% (25/60)

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

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

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

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

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

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

  • 回答No.2
  • ベストアンサー

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

<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件)

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


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

お礼率 41% (25/60)

そんなわけがありました。その原因を質問しています。
ボックスを中央寄せしたかったんですが、仰る通り間違えてましたね。
http://www.mozilla.gr.jp/standards/webtips0004.html
あと、別ファイルにしてしまうと質問に書いたときに表現しづらくなるので、やむを得ずstyleで書いてます。
投稿日時:2011/10/18 11:02
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ