ホームページ > ウェブフロントエンド > CSSチュートリアル > コンテナを中央に配置し、子要素をメディア クエリで左揃えにする方法

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

Linda Hamilton
リリース: 2024-11-01 12:10:02
オリジナル
1037 人が閲覧しました

How to Center a Container and Left-Align Child Elements with Media Queries?

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

このシナリオでは、同じサイズの複数の画像を 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート