-PR-
  • すぐに回答を!
  • 質問No.1389146
解決
済み

div要素をセンタリング

  • 閲覧数92
  • ありがとう数1
  • 気になる数0
  • 回答数2
  • コメント数0

<div style="width:300px; text-align:center; border:1px dashed red;">
この文字は中寄せ
<div style="width:200px; border:1px dashed green;">
このボックスも中寄せ
</div>
</div>

このようなHTMLを表示すると、
IEでは、赤い枠の左右中央に緑の枠が入り、「この文字は中寄せ」という文字と、緑の枠が縦にきれいに並ぶのですが・・ネスケやOperaでは、緑の枠が左に寄ってしまいます。
これを、中央に寄せる方法はないでしょうか?
(表示が遅くなるのを防ぐために、テーブルは使いたくありません)
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.1
レベル14

ベストアンサー率 66% (1052/1578)

ネスケやオペラの方が正し動作で、text-align:centerでブロックがセンタリングされてしまうのはIEの有名なバグの一つです。
参考urlの内容を参考に対処してみてください。
お礼コメント
noname#43437

なるほど、左右のマージンをautoにするのですね。
うまくいきました。ありがとうございました!
投稿日時 - 2005-05-16 10:35:47
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.2
レベル10

ベストアンサー率 56% (91/162)

<div style="width:300px; text-align:center; border:1px dashed red;"> この文字は中寄せ <div style="width:200px; margin-left:50px; margin-right:50px; border:1px dashed green;"> この ...続きを読む
<div style="width:300px; text-align:center; border:1px dashed red;">
この文字は中寄せ
<div style="width:200px; margin-left:50px; margin-right:50px; border:1px dashed green;">
このボックスも中寄せ
</div>
</div>

上記のように「300px-200px」の差分の100pxを左右に割り振って、左右50pxずつマージンを空ければ良いかと思います。
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

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

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ