（つくば：カエル）

2009年07月07日

at 21:00
posted by @
comments(1)
XHTML+CSS

スタイルシートでボックスを中央に配置

前回、ボックスを画面中央に配置する記事を書きましたが、
先日、ボックスを中央に配置するデザインで、デザイン崩れに久々に遭遇したのでメモ。


【サンプル】
#container

つくばちゃんねるブログ
【HTMLソース】
<body>
<div id="container">
	内容
</div>
</body>

【CSSソース】
body {
	text-align: center;
}
#container {
	margin: 0 auto;
	width: 400px;
	text-align: left;
}




CSSの下記部分で、containerボックスが中央に配置されます。
#container {
	margin: 0 auto;
}


上記のみだとIEで中央配置にならない場合があるので、
IEでもcontainerボックスを中央に配置するために、以下のスタイルを追加します。
body {
	text-align: center;
}

このままだと文字がすべてセンター配置になってしまうので、
containerボックスに以下のスタイルを追加します。
#container {
	text-align: left;
}


タグ ：ボックス中央配置センター横センター

同じカテゴリー（XHTML+CSS）の記事画像
IEでiframeのボーダーが消えない
Firefoxで携帯サイトをシミュレートするアドオン
IEで画像の下に意図しないマージン（余白）が出る
Windows版Safariでテキストエリアのリサイズが可能
IE6でネガティブマージンを指定した画像
styleswitcher.jsでスタイルシート切り替え
同じカテゴリー（XHTML+CSS）の記事
 IEでiframeのボーダーが消えない (2009-07-17 21:00)
 スタイルシートでボックスを画面中央に配置 (2009-05-19 21:00)
 Firefoxで携帯サイトをシミュレートするアドオン (2008-10-31 15:44)
 IEで画像の下に意図しないマージン（余白）が出る (2008-10-09 11:30)
 JavaScriptがいらないGoogleマップ API (2008-06-02 12:15)
 Shift_JISのページでGoogle マップ API (2008-05-23 12:05)
ページ先頭に戻る
（つくば：カエル）

comments

IEやFirefoxとか、ブラウザによって使えないタグがあるから気をつけなくちゃですね！
更にはバージョンによっても色々あるし…
posted by ポム at 2009年07月09日 13:15
ページ先頭に戻る
（つくば：カエル）

comments form

名前：
メール：
URL：
コメント：
ページ先頭に戻る