왼쪽 정렬된 하위 요소와 반응형 이미지를 사용하여 컨테이너를 중앙에 배치하는 방법은 무엇입니까?

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

이 질문은 페이지 중앙에 있는 컨테이너에 이미지를 표시하는 것을 목표로 합니다. 이미지가 그룹화되어 차례로 표시됩니다. 문제는 다양한 브라우저 창 너비를 수용하면서 이미지 사이에 고정된 거리를 유지하는 것입니다.

CSS를 사용하여 이 레이아웃을 구현하려면 미디어 쿼리를 사용하여 뷰포트 크기에 따라 이미지가 포함된 div의 너비를 조정할 수 있습니다. . 아래 코드는 이 접근 방식을 보여줍니다.

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; }
}

HTML 구조 내에서:

<div class="outer">
  <div class="inner">
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
  </div>
</div>

이 접근 방식은 미디어 쿼리를 사용하여 브라우저 창 크기가 조정될 때 내부 div의 너비를 동적으로 조정합니다. 너비는 각 이미지의 크기와 이미지 사이의 원하는 여백을 고려하여 계산됩니다. 행당 이미지 수는 브라우저 너비에 따라 자동으로 변경됩니다.

많은 수의 이미지를 처리하는 경우 성능을 위해 코드를 최적화하는 것이 좋습니다. 또한 보다 유연한 솔루션을 위해 Flexbox 또는 CSS 전처리기를 사용하는 것이 좋습니다.

위 내용은 왼쪽 정렬된 하위 요소와 반응형 이미지를 사용하여 컨테이너를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!