16

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本体の左側に配置され（下の添付リンクで灰色になっています）、ウィンドウのサイズを変更すると右側にスペースが残ります。

ここに画像の説明を入力してください

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

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

http://jsbin.com/etiso5

4

2 に答える 2

21

を削除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バリデーターを通過しません。

于 2011-06-04T09:49:23.513 に答える
0

これは、すべてのアイテムが同じ幅であることを前提としています。アイテムの最後の行を中央に配置したくない場合は、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));
于 2013-08-01T23:19:40.813 に答える