CSS:IEでの中央寄せ、margin”auto”が効かない件
JavaScript・XHTML・CSS (43 items)
2006年03月20日
ネット上では既に周知のネタかも知れませんが、、
div要素で囲まれた範囲を中央寄せしたい場合、
と、marginの左右に”auto”を指定すれば実現できます。
div要素で囲まれた範囲を中央寄せしたい場合、
margin-left: auto;
margin-right: auto;と、marginの左右に”auto”を指定すれば実現できます。
<html>
<head>
</head>
<body>
<div style="margin-left: auto; margin-right: auto; border: 1px solid #000000; width: 200px;">
中央寄せしたい部分
</div>
</body>
</html>ただ、、これはIEでは適用されません。（2006/3/20現在、IEの最新バージョン6まででの現象）
一言でいえばIEのバグ、、でしょう。
で、このIEへの対応としては、"text-align: center;"を指定すればいい、となっています。厳密にCSS定義としては間違ってますが、IEへの「仕方の無い対応」です。
具体的には、
という具合に、「中央寄せしたいdiv要素を、更に"text-align: center;"指定のdiv要素で囲む」事で実現できます。
※もちろんこれは一例で、上記で言えば、bodyタグに直接"text-align: center;"を指定してもできます。
一言でいえばIEのバグ、、でしょう。
で、このIEへの対応としては、"text-align: center;"を指定すればいい、となっています。厳密にCSS定義としては間違ってますが、IEへの「仕方の無い対応」です。
具体的には、
<html>
<head>
</head>
<body>
<div style="text-align: center;">
<div style="margin-left: auto; margin-right: auto; border: 1px solid #000000; width: 200px; text-align: left;">
中央寄せしたい部分
</div>
</div>
</body>
</html>という具合に、「中央寄せしたいdiv要素を、更に"text-align: center;"指定のdiv要素で囲む」事で実現できます。
※もちろんこれは一例で、上記で言えば、bodyタグに直接"text-align: center;"を指定してもできます。
前の記事 次の記事
この記事に関連した過去記事一覧は画面下にあります。
Comments
@Style wrote:
text-align: left; よりも text-align: justify;のほうがお勧めです。2006年03月27日 14時56分44秒
ossi wrote:
@Styleさんご教授ありがとうございます。”text-align: justify;”、参考にします。。
2006年03月27日 20時59分57秒
Elan Hung wrote:
Note that IE6 does center a div with "margin-left:auto;margin-right:auto". You must have put your page rendered in "quirks" mode (ie. without DOCTYPE declaration!). IE6 behaves correctly in standard mode. For browsers before version 6, you still have to apply the "text-align" thingy.2006年05月03日 15時52分48秒
ossi wrote:
"quirks" mode、"standard" modeについて、わかってませんでした。。もっと、勉強します。。。2006年05月31日 15時54分03秒
Add Comments
Trackback
トラックバックはありません
Trackback URL
http://www.res-system.com/weblog/action.php?action=plugin&name=TrackBack&tb_id=567