左揃えの子要素とレスポンシブ画像を含むコンテナを中央に配置するにはどうすればよいですか?

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

この質問は、ページの中央にあるコンテナに画像を表示することを目的としています。画像をグループ化して次々に表示します。課題は、さまざまなブラウザ ウィンドウの幅に対応しながら、画像間の固定距離を維持することにあります。

CSS を使用してこのレイアウトを実現するには、メディア クエリを使用して、ビューポート サイズに基づいて画像を含む div の幅を調整できます。 。以下のコードは、このアプローチを示しています。

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; }
}

HTML 構造内:

<div class="outer">
  <div class="inner">
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
  </div>
</div>

このアプローチでは、メディア クエリを使用して、ブラウザ ウィンドウのサイズが変更されるときに内部 div の幅を動的に調整します。幅は、各画像のサイズとそれらの間に必要なガターを考慮して計算されます。行ごとの画像の数は、ブラウザの幅に基づいて自動的に変更されます。

多数の画像を扱う場合は、パフォーマンスのためにコードを最適化することをお勧めします。さらに、より柔軟なソリューションとして、Flexbox または CSS プリプロセッサの使用を検討してください。

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