写真/画像をサムネイル一覧するHTMLサンプルを作成。
「サムネイル一覧のブロック全体はページ内で左右中央揃えし、ブロック内の複数画像は左寄せする。」というのをCSSだけで実現したかったが、ブロック内の右側に余分な余白が付いてしまうのを解除する方法が見つからず。
（【2017/4/11追記】CSSのみで実現する方法が分かった。詳細は以下。
http://2ndart.hatenablog.com/entry/2017/04/11/193206
）
Yahoo!知恵袋で質問して、oishii_mahouさんからJavaScriptで実現する方法を教えてもらって解決。方法としては、ブロック内の横一列に並ぶ画像の数に合わせてブロックの横幅を調整し、余分の余白が出来ないようにする。
画像サムネイル一覧のブロック全体をページ内で左右中央揃えしたい。... - Yahoo!知恵袋
画像サムネイルHTMLサンプルページは以下。なお、ブロック内の各画像はそれぞれ正方形ボックス内で上下左右中央揃えしている。
≪画像サムネイル・サンプル≫
https://ok2nd.github.io/tool/html/thumbnail-sample.html
≪8cm×12cmの小さなアート≫にも適用。（2017/4/13：Media Queriesを使う方法に変更。）
https://ok2nd.sakura.ne.jp/art/
以下関係部分のHTML+CSS+JavaScript。
<div id="contents">
<div id="gallery">
<span style="background-image: url('thumbs/001.jpg')"></span>
<span style="background-image: url('thumbs/002.jpg')"></span>
...
</div>
</div>
<style>
#contents {
margin: 0 auto;
}
#gallery {
margin: 0 auto;
padding: 0;
text-align: left;
}
</style>
<script>
function initGallery() {
gallery = document.getElementById("gallery");
imgItem = gallery.getElementsByTagName("span");
gallery.innerHTML = gallery.innerHTML.replace( /\r?\n|\r/g, "" ); // 改行コードを除去
adjustGallery();
}
function adjustGallery() {
var imgStyle = imgItem[0].currentStyle || document.defaultView.getComputedStyle(imgItem[0], "");
var imgMargin = parseInt(imgStyle.marginLeft, 10) + parseInt(imgStyle.marginRight, 10);
var imgWidth = imgItem[0].offsetWidth + 5;
var winWidth = document.body.offsetWidth || document.documentElement.offsetWidth; // ウィンドウ幅
var imgNum = Math.min(Math.floor(winWidth/imgWidth), imgItem.length); // 横に並んでいる画像の数
gallery.style.width = imgNum * imgWidth + (imgNum - 1) * imgMargin + "px";
}
window.addEventListener( "load", initGallery, false );
window.addEventListener( "resize", adjustGallery, false );
</script>
