左揃えの子要素とレスポンシブ画像を含むコンテナを中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-11-02 08:42:29

オリジナル

871 人が閲覧しました

How to Center a Container with Left-Aligned Child Elements and Responsive Images?

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

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

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 サイトの他の関連記事を参照してください。