横浜の業務用ソフトウェア開発やPHPを使ったWEBシステム開発・ホームページ制作ならアイ・エヌ・ワークスにお任せください。

横浜のホームページ制作ページ
  • home
  • 会社概要
  • 制作実績
  • 価格
  • ダウンロード
  • ブログ
  • お問い合せ
ホーム > ブログ

【横浜のWeb制作業者】ブログ

  • home
  • 横浜のホームページ制作・アイエヌワークス会社概要
  • 横浜のソフトウェア開発・アイエヌワークスの制作実績
  • 横浜のWebサイト制作・アイエヌワークスの価格
  • ダウンロード
  • 横浜のウェブ制作・アイエヌワークスのブログ
  • 横浜のWebシステム・アイエヌワークスへのお問い合せ

あるdiv要素を中央寄せにしようとして、ちょっと悩んだので忘れないようメモします。

<style>

div#a {
    width:100%;
    text-align:center;
}

div#b {
    width:100px;
    border:1px solid #333;
}

</style>

<div id="a">
<div id="b">text</div>
</div>


これは、IEだと正しく中央寄せされるのに、Firefoxでは中央寄せされない。
なんでかな~と調べてみたら、FireFoxの場合は子要素の側でも、親要素の余白指定を使うかどうかをmarginで指定してあげないと思ったとおりの表示にならない。
そこで、styleタグの中に以下を追加する。


div#b {
    width:100px;
    border:1px solid #333;
    margin-left:auto;
    margin-right:auto;
}

これで期待通り中央寄せ表示される。

 

 

 

2 Comments

  1. あるHPの制作でdiv,imgの各要素に右寄せを設定しようとして、cssにtext-align:rightを設定しました。当然ながら、FFやSafari、GCでは左寄せとなり、その前の要素がfloat:leftを含んでいる為、要素が重なって表示されてしまいました。後にmargin-left:autoを入れると右寄せになると知り、ローカルで試してみたところ、imgの要素は右寄せになりましたが、divは左寄せのままでした。 ある大きなHPの一部をやや独立したHPとして作っているHPなので、他のCSSの要素が影響している可能性は否定できませんが(どうなっているのか管理権限がなく、わからないので)ローカルのキャッシュの問題なのか、WEBにアップしたら解消するのか悩んでいます。

    コメント by S.M. — 2012年4月3日 @ 7:06 PM

  2. ずいぶん遅くなってすいません。たぶん、Webにアップしても解決することはないんじゃないかと思います。Firebugなどでどのようなcssが適用されているか確認されてみてはいかがでしょうか。

    コメント by skatsube — 2012年5月2日 @ 11:12 AM

TrackBack URL

Leave a comment