鯖コップ

何かテンプレートを配布しているらしいですよ。奥さん。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
更新日
--/--/--
カテゴリ
スポンサー広告
この記事へのコメント
トラックバックはこちらから

XHTML1.0+CSSでリストをでセンタリングしたい時用メモ

あまり使えなさそうなメモ書きですが・・・、私自身が必要になったのでとりあえず残しておきます。

ソース

HTML記述

<div>
<ul>
<li>テスト</li>
<li>テスト2</li>
</ul>
</div>

CSS記述

div {
text-align:center;
}

ul {
text-align: justify;
margin-left: auto;
margin-right: auto;
/* WindowsIE用margin */
_margin-left: 0;
_margin-right: 0;
}

説明

普通、ボックスモデル要素をセンタリングする時は

ul {
margin-left: auto;
margin-right: auto;
}

と書きます。こうすることで左右のmarginの値が自動調節されセンタリングできます。
しかし、Windows IEの場合autoはこのような動作をしません。それどころかmarginの左右の値は、ulが本来持つmarginの値に戻されてしまいます。その結果、センタリングできません。
Windows IEでセンタリングするには、親要素のdivにtext-align:center;を適用します。

div {
	text-align:center;
}

text-alignはインライン要素をセンタリングする時に使うものですが、Windows IEではバグがありボックスモデル要素もセンタリングできます。
最後にCSSハックを使ってWindows IEの場合のmarginの値を直します。
WindowsIEの場合、この作業を欠かすとリストが若干右にずれてしまいます。autoのバグによってmarginの左右の値がulの本来持つ値に戻されてしまっているからです。

ul {
/* WindowsIE用margin */
_margin-left: 0;
_margin-right: 0;
}

ここの値はWindows IEだけにしか適用されません。
Windows IEではプロパティの前に『_』を置いてもそれを読み飛ばしてしまうバグがありますが、それを利用したものです。

スポンサーサイト
更新日
2005/05/26
カテゴリ
template
この記事へのコメント
コメント : 1
トラックバックはこちらから
トラックバック: 0

コメント

助かりました!

同じ問題で詰まってました。
助かりました!

投稿日
2008/05/09
投稿者
いしい
URL
URL
コメントの編集
編集

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバックURI
http://sabacop.blog6.fc2.com/tb.php/28-8effcf62

ページナビ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。