floatを使った時のセンターリング(中央寄せ)方法。 | 32ARTS(サニーアーツ)

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>


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

<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>

■画像2枚をセンターリング(中央寄せ) 

  • surf2
  • surf2

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

  • surf2
  • surf2

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

【 例1 】
<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>

【 例2 】
<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>