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

レスポンシブグリッドでコンテナを中央に配置し、子要素を左揃えにするにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-01 17:34:02

オリジナル

637 人が閲覧しました

How to Center a Container and Left-Align Child Elements in a Responsive Grid?

コンテナを中央揃え、子要素を左揃え

問題

レスポンシブグリッドで画像を水平方向に中央揃えで表示したいと考えています。それらの間の一定の距離を維持しながら、それらは各列内に残ります。画像は、サイズを変更せずに、行ごとの最大数に合わせてブラウザウィンドウのサイズが変更されると自動的に折り返されます。

解決策

CSS だけで目的のレイアウトを実現するのは難しい場合があります。ここでは、メディアクエリを利用して、ビューポートの寸法に基づいて内部 div の幅を調整するアプローチを示します。

コード

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

ログイン後にコピー

<code class="html"><div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div></code>

ログイン後にコピー