미디어 쿼리를 사용하여 컨테이너를 중앙에 배치하고 하위 요소를 왼쪽 정렬하는 방법은 무엇입니까?

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

이 시나리오에서는 디스플레이에 표시하려는 동일한 크기의 여러 이미지가 있습니다. 웹페이지. 목표는 페이지 중앙에 고정된 거리를 두고 하나씩 그룹화하는 것입니다.

주어진 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!