floatを使った時のセンターリング（中央寄せ）方法。

毎回のように悩まされる　float文の設定。

簡単にできそうなのに、案外簡単には済まず時間がかかることが多いのでメモ。

今回は、floatを使った場合のセンターリング（中央寄せ）。

floatの場合、以下のどちらの設定でも効きません。

margin: 0 auto;

text-align: center;

以下の設定により中央寄せが可能です。

【 css 】

div.top-box	{
		overflow: hidden;
		position: relative;
		}
ul.top-box1	{
		float: left;
		position:relative;
		left:50%;
		margin: 0;
		padding: 0;
		}
ul.top-box1 li
		{
		position: relative;
		left: -50%;
		margin: 0;
		padding: 0;
		}

【 body 】

<div class="top-box">
<ul class="top-box1">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>

では、実際に設定してみます。

【　css部　】

div.top-box	{
		overflow: hidden;
		position: relative;
		margin:20px 0 0 0;
		}
ul.top-box1	{
		list-style-type: none;
		float: left;
		position:relative;
		left:50%;
		margin: 0;
		padding: 0;
		position: relative;
		}
ul.top-box1 li
		{
		list-style-type: none;
		position: relative;
		left: -50%;
		margin:0px;
		float: left;
		}


【　body部 】

<div class="top-box">
<ul class="top-box1">
<li>
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
<li>
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
</ul>
</div>


全体の配置をセンターにしながらも、２つの画像をそれぞれ左右に移動させる場合。

<div class="top-box">
<ul class="top-box1">
<li style="left: -53.7%;">
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
<li style="left: -47%;">
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
</ul>
</div>

■画像２枚をセンターリング（中央寄せ）　

■全体の配置をセンターにしながらも、左の画像を少し左に、右側の画像を少し右に移動させた場合。

注意事項：
上記では横並びに２枚の画像を並べて表示していますが次の行（段落）で同様に
続けて中央寄せしたい場合。普通なら【例１】のように設定してしまいがちですが
この設定では中央寄せできません。【例２】の設定が正解です。

【　例１　】
<div class="top-box">
<ul class="top-box1">
<li>
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
<li>
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
<li>
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
<li>
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
</ul>
</div>

【　例２　】
<div class="top-box">
<ul class="top-box1">
<li>
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
<li>
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
</ul>
</div>

<div class="top-box">
<ul class="top-box1">
<li>
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
<li>
<a href="sample.html"><img src="sample.jpg" alt=""></a>
</li>
</ul>
</div>