web-dev-qa-db-ja.com

フローティングリストアイテムの中央揃え<li> divまたはその<ul>

HTML：

<div class="imgcontainer">
    <ul>
            <li><img src="1.jpg" alt="" /></li>
            <li><img src="2.jpg" alt="" /></li>
            .....
    </ul>
</div>

順序付けられていないリストを作成して単純なギャラリーページをコーディングしており、その各リストアイテムには画像が含まれています。

    ul li {
        float: left;
    }

コンテナの幅を「max-width」に設定して、リストアイテム（画像）をブラウザの幅に合わせることができるようにしました。つまり、ブラウザウィンドウのサイズを変更すると、それらが再配置されます。

    .imgcontainer{
        max-width: 750px;
    }

問題は、これらの画像またはリストアイテムが中央に配置されておらず、.imgcontainer本体の左側に配置され（下の添付リンクで灰色になっています）、ウィンドウのサイズを変更すると右側にスペースが残ることです。

enter image description here

ウィンドウのサイズを変更するたびにこれらの画像を中央に配置するにはどうすればよいですか？

これが、JSBinでプレビューまたは編集できるページ/コード全体です。

http://jsbin.com/etiso5

cssgallerycss-floatcenterlistitem
16
Sam

float:leftを削除し、display:inlineを使用して、text-align:centerを使用できるようにします。画像の間に空白がないように、フォントサイズをゼロに設定します。

ul {
    font-size:0;
    text-align:center
}
ul li {
    display:inline;
    zoom:1
}
.imgcontainer {
    max-width:750px;
    margin:0 auto
}

zoomは古いIEバージョンのハックです。ただし、これは有効なCSSプロパティではないため、W3Cバリデーターを通過しません。

21
Midas

これは、すべてのアイテムが同じ幅であることを前提としています。アイテムの最後の行を中央に配置したくない場合は、JavaScriptの数行でこれを実現できます。インラインブロック、テキスト整列の中央のものを捨て、リスト要素をフロートさせてmargin: 0 autoリストコンテナ上。

JS側では、コンテンツペインまたはウィンドウの幅を計算し、次に行に収めることができるアイテムの数、つまりリストコンテナ要素の幅を決定してから、その幅を設定します。 itemWidthここでは、各リストアイテムの幅+マージン+パディング+境界線を想定しています。

var centerListItems = function (itemWidth) {
  var $paneWidth = $('#my-content').width(),
      setWidth;

  setWidth = parseInt(($paneWidth / itemWidth), 10) * itemWidth;

  $('#my-list').width(setWidth);
}

ウィンドウのサイズが変更されたとき、または向きが変更されたときにウィンドウを変更する場合は、underscore.jsを使用して呼び出しをデバウンスできます。

var event;

if ('onorientationchange' in window) {
  event = 'onorientationchange';
} else {
  event = 'resize';
}

$(window)
  .off(event)
  .on(event, _.debounce(function () {
    centerListItems(itemWidth);
  }, 350));
0
Ben Zalasky