コンテナを中央に配置し、子要素をメディア クエリで左揃えにする方法

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

このシナリオでは、同じサイズの複数の画像を 1 つのコンテナに表示します。ウェブページ。目標は、コンテナをページの中央に、一定の距離を置いて次々にグループ化することです。

指定された CSS コードは、text-align: center を使用してコンテナをページの中央に配置しようとします。 、ただし、子画像の配置については説明しません。その結果、画像は中央揃えや固定間隔なしで直線的に表示されます。

より包括的なソリューションでは、複数のビューポート サイズを考慮し、メディア クエリを適用して画像を含む内部 div に適切な幅を設定する必要があります。コードは次のとおりです:

<code class="css">/* Set parent container to be centered */
.outer {
  text-align: center;
}

/* Set inner div to be inline-block for wrapping child elements */
.inner {
  font-size: 0; /* To prevent inline gaps between divs */
  display: inline-block;
  text-align: left;
}

/* Define the individual image elements */
.item {
  font-size: 16px; /* Reset font size */
  display: inline-block;
  margin: 5px; /* Gutter */
}

/* Image alignment within item divs */
.item img {
  vertical-align: top;
}

/* Media queries for different viewport sizes */
@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 サイトの他の関連記事を参照してください。