css - レスポンシブ：フロートする方法：中央に配置されたulで左li？

Question

レスポンシブデザインはこれが初めてなので、シンプルにしています。

私は<ul>3つの画像の行で中央に配置されているを持っています。ただし、最後の行に1つまたは2つの画像しかない場合は、行全体が中央に配置されるため、画像を左に配置します（つまり、画像は上にある画像と垂直に配置されます）。

これは、で簡単に実行できますfloat:left。ただし、各行の画像の数は、<ul>画面の中央に配置したまま、ウィンドウサイズに合わせて調整する必要があります。

これがjsFiddleで、一番下の行の中央に1つのアイテムしかありません。ウィンドウのサイズを変更して小さくすると、各行の数または項目が調整され、リストは画面の中央に表示されたままになりますが、最後の行は引き続き中央に配置されます。最後の行を左に揃える方法はありますか？

編集：要求に応じて、ここにいくつかの写真があります。これが私が探しているものです。は<ul>画面の中央に配置されていますが、一番下の行は左に配置されています。

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

ただし、ウィンドウのサイズを変更すると、リストは適応しますが、<ul>それでも画面の中央に配置され、一番下の行は左に揃えられます。

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

どうすればこれを達成できますか？

score 3 · Accepted Answer

通常、ulに固定の幅とマージンを与えることをお勧めします：0 auto; 中央に配置しますが、ページとともに拡大する場合は、左右の余白を固定します。

ul {
    max-width:800px;
    margin: 0 50px;
}

ul li {
    float: left;
}

ul li img {
    margin:5px;
}

</ p>

score -1 · Accepted Answer

すべての画像を1つにまとめてから、liそうすると、うまくいくfloat: leftと思います。

2 に答える 2