コンテナを中央に配置し、応答性の高い列を持つ子要素を左に配置するにはどうすればよいですか?

コンテナの中央揃えと子要素の左揃え

あなたの質問は、Web ページ上に中央揃えで動的な数の画像を表示することを目的としています。サイズ変更せずに一列に整列します。子要素はグループ化して間隔をあけて配置する必要があります。

これを実現するには、CSS でメディア クエリを利用できます。提供されたコードは、次の方法を示しています。

<code class="css">body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for 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>

このコードには、内部 div の幅が動的に調整されるように、さまざまな画面サイズに対応する特定のメディア クエリが含まれています。要件に応じて余白 (マージン) サイズを調整する必要がある場合があることに注意してください。

以上がコンテナを中央に配置し、応答性の高い列を持つ子要素を左に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。