レスポンシブ グリッドでコンテナを中央に配置し、子要素を左揃えにするにはどうすればよいですか?

コンテナを中央揃え、子要素を左揃え

問題

レスポンシブ グリッドで画像を水平方向に中央揃えで表示したいと考えています。それらの間の一定の距離を維持しながら、それらは各列内に残ります。画像は、サイズを変更せずに、行ごとの最大数に合わせてブラウザ ウィンドウのサイズが変更されると自動的に折り返されます。

解決策

CSS だけで目的のレイアウトを実現するのは難しい場合があります。ここでは、メディア クエリを利用して、ビューポートの寸法に基づいて内部 div の幅を調整するアプローチを示します。

コード

<code class="css">body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fox inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}</code>

<code class="html"><div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div></code>

考慮事項

• 使用を検討してください。多数の項目に対応する JavaScript。
• CSS プリプロセッサにより、コードの再利用性が向上します。
• 要件に合わせて、必要に応じてメディア クエリ ブレークポイントを調整します。

以上がレスポンシブ グリッドでコンテナを中央に配置し、子要素を左揃えにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。