CSSでブロックレベル要素をセンタリングする

CSSでブロックレベル要素をセンタリングする

Posted at October 24,2006 12:38 AM
Tag:[CSS]

インライン要素をセンタリングする場合は、その要素のCSSで

text-align: center;

という text-align プロパティを与えれば良いのですが、div や table 等のブロックレベル要素をセンタリングする場合、例えば下記のようにマークアップされた ブロックレベル要素、

<div id="test">[ブロックレベル要素]</div>

をセンタリングする場合は、CSSに下記のような設定を行います。

#test {
    margin-left: auto;
    margin-right: auto;
    width: [ブロックレベル要素の幅];
}

ブロックレベル要素のセンタリングは上記が正しい方法で、Firefox や Opera、また IE6 の「標準準拠モード」や最近リリースされた IE7 では上記の設定で正常に表示されますが、IE6 の「後方互換モード」ではブラウザにバグがあるため、センタリングされません。*1

したがって、IE6 の「後方互換モード」でも同じようにセンタリングさせるためには、前述の div 要素をさらに div 要素でラップし、

<div id="wrap">
<div id="test">[ブロックレベル要素]</div>
</div>

追加した div 要素のスタイルに text-align プロパティを追加します。これは IE6 のバグを利用した手法です。*2

#wrap {
    text-align: center;
}
#test {
    margin-left: auto;
    margin-right: auto;
    width: [ブロックレベル要素の幅];
}

これでいずれのブラウザでもセンタリングされるようになります。
なお #wrap に設定した text-align プロパティは #test に対しても有効になるため、例えば内部のインライン要素を左寄せにする場合は、#test あるいはインライン要素に対して text-align: left を追加してください。

逆に、IE6 の後方互換モードでしかHTMLの表示確認をしていない場合、誤って

#test {
    text-align: center;
}

というマークアップをしていると、Firefox 等ではセンタリングされませんのでご注意ください。


*1:「標準準拠モード」と「後方互換モード」の詳細については「標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する」が参考になれば幸いです。

*2:参考 - Web標準普及プロジェクトブロックレベル要素をセンタリングする方法

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

ブロック要素のセンタリング(CSS編集) from yozoの気が向いたと記2.0
はじめに 画像や表などを記事の真ん中に配置する(センタリングする)とき、以前では、<center>や<div align="center... [続きを読む]

Tracked on December 6, 2006 5:32 PM

CSSで中央配置(センターリング)する方法 from CSS Lecture
CSSで中央配置の仕方をちゃんと理解していない人って案外いるみたいなので、詳しく... [続きを読む]

Tracked on May 27, 2008 3:20 PM

CSSでブロックレベル要素をセンタリングする from ホームページ制作のためのリンク集
引用: インライン要素をセンタリングする場合は、その要素のCSSで「text-a... [続きを読む]

Tracked on September 25, 2008 1:44 PM
コメント

いつもお世話になっております。オリジナルテンプレートの件で聞きたくコメントしました。ほんとは、テンプレートのところでコメントしようと思っていたのですが最近そちらのBlogが重くてページが開きにくいのでこちらにコメントしました。そこで、検索などでエラーが発生した時のダイナミックページエラーのテンプレートの配布はないのでしょうか? 一度検索で自己的にエラーをおこしてみたら表示が崩れてしまっています。恐れ入りますがサポート宜しくお願いします。

[1] Posted by panser : October 24, 2006 7:20 PM

>panserさん
こんばんは。
ご質問の件につきまして、「崩れている」というのが、どの程度のものか分かりませんが、入力した文字列にヒットするページがみつからなかった場合の検索結果ページは配布中の「検索結果テンプレート」に含まれています。

panserさんの「検索」という言葉を「Movable Type の検索機能」を指していると解釈しましたが、認識が誤ってましたら具体的な状況・手順等をお知らせください。
それではよろしくお願い致します。

[2] Posted by yujiro : October 25, 2006 9:59 PM

yujiroさん、おはよーございまっす♪
IE6.0だけで編集していて、text-align:center;でtableをセンタリングしてました。(yozoのブログの右サイドにあるCLEVER BBSです。)これってIEのバグだったのですね。Firefoxで見るとセンタリングされていませんでしたよ。┐( -"-)┌ヤレヤレ...
早速記事を参考にさせていただいて、修正し、バッチリセンタリングできました。いつも勉強させてもらってます。ありがとーございまっす♪m(_ _)m

[3] Posted by yozo : October 27, 2006 10:47 AM

>yozoさん
こんばんは。
コメントありがとうございます。
お役に立てたようで良かったです。
ではでは!

[4] Posted by yujiro : October 28, 2006 1:22 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)