body { text-align: -moz-center; }

body 
{ 
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}

#div_container {
position: absolute;
left: 50%;
height: 100%;
width: 1000px;
margin-left: -500px; /* MUST be half the width */
}

コメント&トラバ

トラックバックを送る

トラバURL : http://suin.asia/trackback/135

コメントを書く

トラックバック

IE8とFirefoxではcssの挙動が違う hinoeuma1966 (2009.07.03) #

表現の仕方が正しいのか、よくわかっていませんが、、、、。昨日までにcssを使った...

margin:0 auto; でも　text-align:center;　でもなくセンター揃え インターネット覚え書き「ビボウログ」 (2009.09.16) #

通常、幅を指定したdivに「margin:0 auto;」を指定してやればウィンドウのセンターに揃うのですが、IEの6ではセンターになりません。「text-align:center;」にしてやれば揃うのですが、その中に含まれるもの全てがセンターになってしまうため、中のものそれぞれに「text-a...

CSSレイアウト初心者のジブン Re: (2009.12.15) #

CSSのtext-align:center;は<div>には通用しないということを理解されたし。FFメインでいきたいが、PCリテラシが初期の人は大抵がIEだと思われるわけで、2分のクロスブラウザは必要なんだ。ところで、ブログで時々ソースコードの部分がここのような感じの表示を見か...

コメント

(2009.03.20) #

divに
margin: 0 auto;
とか入れればモダンブラウザでセンタリングされるはず。

かにお(2009.04.03) #

そうですね。
こんな方法も有りますね。
良く考えるとこの方法の方がtext-align:centerを
利用するよりオールマイティにどのブラウザでも
正確にセンタリング出来ると思います。
私も早速、使ってみようと思います。

ヤマ(2009.04.09) #

はじめまして。CSS初心者でセンタリングの方法を
検索していたのですが、わかりやすい説明が
載っているサイトがなかなかなく・・・
とても役に立ちました！！ありがとうございます！

もう少しで<center>タグでいいや・・・と
諦めるところでした(笑)

frw(2009.04.23) #

はじめまして。
margin: 0 auto;はシンプルでイイですね！
色々参考になりました。

CSSはどこまで書けばいいのでしょう？
規格統一ができれば楽だけど・・・。

その自由な考えでトライできるのがCSS？

tomo(2009.06.19) #

やってみたらできました。ありがとうございます。
環境：safari4.0 firefox3.0 ie8
です。

hinoe_uma66(2009.07.03) #

昨日からcssをいじりはじめた超初心者です。
大変参考になりました。ありがとうございます。

margin: 0 auto;のほうはうまくいませんでした。
きっと指定の仕方が悪いのでしょうが、直し方がわからないので、使っていません。

shenye(2009.07.28) #

ちゃんと下記を試してないでしょうか？
#div_container {
height: 100%;
width: 1000px;
margin: auto; /* MUST be auto */
}

ｋ(2009.09.07) #

0 auto は幅を設定しないと効かないよ
互換ＩＥには効かない

このブログのやり方がいい気がする

may(2009.09.14) #

はじめまして。
助かりました。
ありがとうございました！

くに(2009.11.18) #

margin:auto;
は、ＩＥ６の場合、親要素にheightを指定するとできたような気がします。

mura(2010.04.19) #

自分もこれで悩んでおりました。

今日気付いたのですが、divの表示形式（display）をinlineに設定するとセンタリングが効きました。
これは邪道？

１５(2010.08.30) #

こんにちは。
同じことで気にしていましたので、とても助かりました。

しかし、私のページで”position: absolute; ”
としてしまうと、IEのバグでtableのborder-top/bottomが
印刷2枚目から印刷されなくなりました。

原因はposition: absolute; とわかったので、
解決法が見つかれば再度使いたいのですが、
皆さんはバグってないのでしょうか？？

azz(2010.09.03) #

15さん>
中寄せはmargin:0 auto;が基本だと思います。
absoluteを使っての中寄せは一番外枠だけが無難かな、と。
ちなみにIEの仕様はバグで本来centerはblock要素に効きません。
だから上のmuraさんのようにdisplayをinlineにすれば効くわけです。

印刷時にabsoluteがあるとバグの原因になりますので、CSSを読み込む時にstyleタグにメディアタイプを指定(media="print")してscreenとprintでCSSを切り替えることで回避できます。

このブログの著者

Suinと申します。

@suin on Twitter

サブメニュー

最近気になるモノ！

WindowsからMacに乗り換えて半年ですが、Macは細かいところまで丁寧に作られていて、親切なユーザーインターフェイスが気に入ってます。iMacはMagic Mouseと洗練されたデザインのBluetoothキーボードがついてくるので、お得だなあ、なんて思ってます。私に買ってもいいという方、いたら教えてください 笑。

最近のエントリ

XOOPS Cube Dev Ring

最近のコメント

最近のトラックバック