컨테이너를 가운데 정렬하고 하위 요소를 반응 열에 왼쪽 정렬하는 방법은 무엇입니까?

가운데 정렬 컨테이너 및 왼쪽 정렬 하위 요소

귀하의 질문은 중앙 정렬 및 왼쪽 정렬 하위 요소를 웹 페이지에 동적으로 표시하는 것을 목표로 합니다. 크기 조정 없이 행으로 정렬됩니다. 하위 요소는 함께 그룹화되고 간격을 두어야 합니다.

이를 달성하려면 CSS에서 미디어 쿼리를 활용할 수 있습니다. 제공된 코드는 다음 방법을 보여줍니다.

<code class="css">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;
    }
}</code>

이 코드에는 내부 div의 너비가 동적으로 조정되도록 다양한 화면 크기에 대한 특정 미디어 쿼리가 포함되어 있습니다. 요구 사항에 따라 여백(여백) 크기를 조정해야 할 수도 있습니다.

위 내용은 컨테이너를 가운데 정렬하고 하위 요소를 반응 열에 왼쪽 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!