ここから本文です

画像サムネイル一覧のブロック全体をページ内で左右中央揃えしたい。 ブラウザ...

ok_2ndさん

2017/3/1217:38:36

画像サムネイル一覧のブロック全体をページ内で左右中央揃えしたい。

ブラウザの表示ページ幅に関係なく、ブロック全体をページ内で左右中央揃えしたいが、divブロック内に余分な余白がついてしまう。

divの幅を中の複数画像に合わせて、余白をなくしたい。
ブラウザの画面をリサイズしても、同様に表示したい。

cssのみで実現できればベストだが、JavaScript利用する方法でも可。

以下にサンプルを載せました。
http://2green.890m.com/test/div-center-left.html

span&gt,ブラウザ,左右中央揃え,余白,ブロック全体,resize&quot,imgbox&quot

閲覧数:
99
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

oishii_mahouさん

2017/3/1219:34:37

CSS だけだと、
ウィンドウ幅を小さくしたときに、
画像が均等割り付けの状態で揃えるのが限界じゃないかな。

-------
<div id="imgbox-outer">
<div id="imgbox">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

<style type="text/css">
#imgbox-outer{
text-align: center;
}
#imgbox{
display: inline-block;
text-align: justify;
text-align-last: left;
border: solid 1px #666;
}
#imgbox span{
display: inline-block;
width: 100px;
height: 100px;
margin: 4px;
background: #ccc;
vertical-align: top;
}
</style>
-------

CSS だけだときついけど、Javascript を使うとできる。
window の "resize" イベントに、
ブロックの横幅を画像幅の倍数に合わせる処理を入れる。

↑のコードに、下記のコードを追記するだけ。

-------
<script type="text/javascript">
/*---- 初期動作の関数 ---*/
function initImgbox(){
// 要素を取得
imgbox = document.getElementById("imgbox");
imgitem = imgbox.getElementsByTagName("span");
// コード改行を除去
imgbox.innerHTML = imgbox.innerHTML.replace( /\r?\n|\r/g, "" );
// ボックス幅を調整
adjustImgbox();
}
/*---- 幅を合わせる関数 ----*/
function adjustImgbox(){
// 画像の左右 margin を取得
var imgstyle =
imgitem[ 0 ].currentStyle ||
document.defaultView.getComputedStyle( imgitem[ 0 ], "" );
var imgmargin = parseInt( imgstyle.marginLeft, 10 )+parseInt( imgstyle.marginRight, 10 );
// 画像の幅(含 margin)
var imgw = imgitem[ 0 ].offsetWidth+imgmargin;
// ウィンドウ幅
var w = document.body.offsetWidth || document.documentElement.offsetWidth;
// ボックス幅を調整
imgbox.style.width = Math.min( Math.floor(w/imgw), imgitem.length )*imgw+"px";
}
/*---- 発動 ----*/
window.addEventListener( "load", initImgbox, false );
window.addEventListener( "resize", adjustImgbox, false );
</script>
-------

  • 質問者

    ok_2ndさん

    2017/03/1221:38:21

    oishii_mahouさん、速攻の素晴らしい回答ありがとうございます。
    いただいたCSSのままだと、1段目と2段目の画像が不揃いになりました。
    JavaScriptもそのままだと微妙に余白が残ったりしたので、少し修正してみました。

    (返信にurlが含まれているとエラーになるようなので、http:を除いています。)
    2green.890m.com/test/div-center-left2.html

    ほぼ期待に近いものになった気がします。ありがとうございます。
    ...
    // 画像の幅(含む margin)
    // var imgw = imgitem[ 0 ].offsetWidth+imgmargin;
    // 画像の幅(含まない margin)
    var imgw = imgitem[ 0 ].offsetWidth + 5;
    ...
    // ボックス幅を調整
    // imgbox.style.width = Math.min( Math.floor(w/imgw), imgitem.length )*imgw+"px";
    img_width_item = Math.min( Math.floor(w/imgw), imgitem.length );
    imgbox.style.width = img_width_item * imgw + (img_width_item-1) * imgmargin +"px";
    }
    ...

  • その他の返信を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2017/3/14 16:00:28

丁寧なJavaScriptまで作成いただき、ありがとうございました。

問題解決しました。

http://home2nd.html.xdomain.jp/thumbnail-sample.html

ベストアンサー以外の回答

1〜1件/1件中

プロフィール画像

カテゴリマスター

yoyama1208さん

2017/3/1221:16:01

赤枠のところだけの余白を消したいだけでしたら、
.gallery {
margin: 0 auto;
border: solid 1px #444;
padding: 0;
width: 1238px; /* 追加 */
}

このように「width: 1238px;」を追加してみてください。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。