横並びの画像や inline-block の要素を、均等配置 (justify) にするための CSS コードです。

IE 6, Firefox 2, Opera 9.6, Safari 3 で意図したとおりに表示されることを確認しました。

• 動作確認用の demo

説明

以下のようなコードを準備します。

HTML のソースコード例

<ul class="images">
<li><img src="img01.png" width="100" height="100" alt="" /></li>
<li><img src="img01.png" width="100" height="100" alt="" /></li>
<li><img src="img01.png" width="100" height="100" alt="" /></li>
</ul>

この HTML ソースコード例に適用する CSS コード

ul.images {
	padding:0;
	margin:0;
	font-size:0;
	text-align: justify;
	text-justify: distribute-all-lines;
}

ul.images:after{
	content:url(css_justify.png);
	line-height:0;
	visibility:hidden;
}

ul.images li{
	display:inline;
	margin:0;
	padding:0;
}

まず、text-align を有効にするために、ul.images li の display の値を inline、または inline-block にします。

次にその親となる ul.images に対して、text-align: justify; と text-justify: distribute-all-lines; を指定します。これで均等配置はできるようになりますが、Frefox 2 では text-justify が無視されてしまい、2 行以上ない場合は均等配置されません。なので、強制的に 2 行以上にする仕組みを作ります。

2 行目をつくるには疑似要素 (E:after) を利用します。ul.images:after とすれば、ul.image の最後の子要素として、何かを挿入できます。テキストを挿入した場合、挿入された文字の高さの影響でいらないスペースができてしまうので、横幅がコンテンツ幅、高さ 1 px の画像を挿入します。demo はコンテンツ幅が 600 px なので、600 * 1ピクセルの透明の png-8 を使用しました。

ul.images:after{
	content:url(css_justify.png);
	line-height:0;
	visibility:hidden;
}

のコードで画像の挿入を実現し、強制で2行以上になるようにします。これで Firefox 2 でも 1 行目が均等配置されるようになります。

最後に、HTML ソースの書き方を少し工夫します。Safari では、このままではうまく均等配置できません。なので、</li> の後に半角のスペースを 1 つ追加します。次の例では、半角のスペースがわかりやすいように「_」に置き換えています。

<ul class="images">
<li><img src="img01.png" width="100" height="100" alt="" /></li>_
<li><img src="img01.png" width="100" height="100" alt="" /></li>_
<li><img src="img01.png" width="100" height="100" alt="" /></li>_
</ul>

これで、IE 6, Firefox 2, Opera 9.6, Safari 3 で画像などの均等配置を実現できます。

トラックバックURI

http://www.yomotsu.net/lab/css/layout_justify-images/trackback

実験室に戻る

Web サイト内検索