반응형 그리드에서 컨테이너를 중앙에 배치하고 하위 요소를 왼쪽 정렬하는 방법은 무엇입니까?-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>

로그인 후 복사