block 要素をセンタリングする正しい方法

本日はちょっと小休止ということで、軽めのネタを。 CSS で block 要素をセンタリングする方法をご紹介します。 inline 要素は text-align を指定するだけで中央寄せできますが、それで block 要素もセンタリングされるのは IE6 だけです。正式には、 text-align は block 要素の配置には影響しません。ということで、ブラウザによらず block 要素をセンタリングするためには、ちょっとした工夫が必要です。もっとも、 CSS に詳しい方はとっくにご存知だと思いますが、備忘録代わりに記事にしてしまいます（＾＾ゞ

具体的な方法

それではどうするのかというと、方法は簡単、センタリングする block 要素の左右マージンを auto にして、 width を明示的に指定するだけです。例えば、以下は短いテキストを格納した div 要素をセンタリングして表示する HTML です。

<html>
 
<head>
<style>
body {
  width: 100%;
}
div#wrapper {
  margin: 1.5em auto;
  width:  200px;
  border: solid 1px black;
}
</style>
</head>
 
<body>
<div id="wrapper">
ページ内容
</div>
</body>
</html>

表示結果はこうなります。

ページ内容

この方法を使えば、コンテンツを表示幅固定でセンタリングして表示するようなページレイアウトが CSS だけで実現できます。最近は大手のサイトもどんどん CSS ベースに移行しているみたいですね。ちなみにこのページは、現在のところテーブルレイアウトです（´Д｀；。いや、元のテンプレートがそうだったもので・・・。テーブルレイアウトだと HTML に余計なタグが多くなって、メンテナンスしづらいんですよね。暇をみて完全 CSS ベースに移行したいと思っています。皆さんも新しくページを作るときは、ぜひ CSS でレイアウトしましょう！（ＴДＴ）/

2006年08月18日 08:04 | Comments() | TrackBack() |

この記事にコメントする

Recommendations

Books

「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ！

WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

block 要素をセンタリングする正しい方法

具体的な方法

この記事にコメントする