floatした要素が複数行になった時に、レスポンシブ対応で中央揃えにする

floatした要素が1行の時の中央揃えの方法は以前記事を書いたのですが、今回は2行以上に対応する方法を考えてみました。

サンプルコード

まずは対応前のサンプルです。

HTML

<div class="list">
	<div class="list-item">
		<img src="http://placehold.it/220x160">
	</div>
	<div class="list-item">
		<img src="http://placehold.it/220x160">
	</div>
	～略～
	<div class="list-item">
		<img src="http://placehold.it/220x160">
	</div>
</div>

CSS

.list {
	max-width: 960px;
	margin: 0 auto;
}
.list-item {
	float: left;
	margin: 0 10px 20px;
}

中央揃え対応前のデモページ
ブラウザ幅が960px以上の時は中央揃えになりますが、959px以下の場合は全体的に左寄せになってしまいます。

サンプルコード2

CSSだけでは難しそうだったのでJavaScriptを使って対応しました。

JavaScript

$(function() {
	var $floatParent = $('.list'); // 中央揃えにする要素
	var $floatItem = $('.list-item'); // floatする要素

	// ページアクセス時とリサイズ時に中央揃えの処理を実行
	floatCenter();
	$(window).on('load resize', function() {
		floatCenter();
	});

	// float要素を中央揃えにする処理
	function floatCenter() {
		$floatParent.css('width', 'auto'); // 中央揃えにする要素の幅指定を解除
		var topPosition = $floatItem.eq(0).offset().top; // float要素の1行目の縦位置取得
		var w = 0; // 中央揃えにする要素の幅をこの変数に追加していく
		// float要素を
		for (var i = 0; i < $floatItem.length; i++) {
			// 対象のfloat要素が1行目以外にあるときはfor文を終了する
			if(topPosition != $floatItem.eq(i).offset().top) {
				break;
			}
			// 変数に対象のfloat要素のmarginを含めた幅を追加
			w += $floatItem.eq(i).outerWidth(true);
		}
		// 中央揃えにする要素に幅を指定
		$floatParent.css('width', w);
	}
});

中央揃え対応後のデモページ
最後の行の余りが中央揃えでよいのならfloatを使わずにdisplay: inline-block;にする方法もありますが、今回は最後の行を左寄せにしたかったのでこのように対応しました。