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

중앙 정렬 컨테이너와 왼쪽 정렬 하위 요소

이미지가 고정된 중앙 컨테이너에 표시되는 원하는 레이아웃을 얻으려면 거리를 두고 다양한 CSS 속성을 고려해야 합니다:

컨테이너 중앙에 배치:

• text-align 사용: center; 페이지의 가로 중앙에 배치합니다.

하위 요소 컨테이너 만들기:

• 이미지 래핑 내부 div(inner-div) 내에서 정렬을 제어합니다.

이미지 크기 설정:

• 일관적인 이미지 크기(높이 및 너비)를 유지합니다. ) 정렬을 보장합니다. img 태그에 높이 및 너비 속성을 사용합니다.

여백 추가:

• 하위 요소 사이에 작은 여백(여백: 10px;)을 도입합니다. inner-div 내의 요소(img 태그) 이렇게 하면 이미지 사이에 고정된 간격이 생성됩니다.

수평 정렬:

• 디스플레이 설정: 인라인; 하위 요소 컨테이너(inner-div)에서 하위 요소(이미지)를 가로로 표시합니다.

왼쪽 정렬 하위 요소:

• text-align 사용: 왼쪽; 하위 요소 컨테이너(inner-div)에서 하위 요소(이미지)를 왼쪽 정렬합니다.

반응형 디자인:

• 화면 크기에 따라 컨테이너 너비를 조정하려면 미디어 쿼리를 활용하세요. 주어진 예에서 내부 div 너비는 다양한 뷰포트 너비에 맞게 조정됩니다.

이러한 단계를 따르고 제공된 코드 스니펫을 구현하면 컨테이너 중앙에 이미지가 있는 원하는 레이아웃을 얻을 수 있습니다. 일정한 거리를 두고 차례대로 표시됩니다.

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