Div 내에서 이미지를 수직 및 수평 중앙에 배치하려면 어떻게 해야 합니까?

컨테이너 Div 내에서 이미지를 수직 및 수평 중앙에 배치

더 큰 div 내에서 이미지를 정확하게 배치하려는 경우 수직 및 수평을 모두 달성합니다. 수평 정렬이 어려울 수 있습니다. 이를 수행하는 방법은 다음과 같습니다.

가로 정렬:

이미지를 div 내에서 가로 가운데에 맞추려면 상위 div에 적용된 CSS의 text-align: center 속성을 활용하세요. 이렇게 하면 이미지를 포함하여 div 내의 모든 콘텐츠가 중앙에 배치됩니다.

세로 정렬:

세로 정렬을 달성하려면 다른 접근 방식이 필요합니다. 한 가지 효과적인 기술은 절대 위치 지정을 사용하는 것입니다.

• 이미지 위치를 절대 위치로 설정하여 이미지가 가장 가까운 위치에 있는 조상(이 경우 상위 div)을 기준으로 절대적 위치에 있음을 나타냅니다.
• 여백 적용: 자동; 사용 가능한 공간 내에서 이미지를 중앙에 배치하는 자동 여백을 활성화합니다.
• 위쪽, 왼쪽, 오른쪽, 아래쪽을 0으로 설정하면 이미지가 상위 div의 전체 높이와 너비를 포함합니다.

CSS 예:

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

다음을 통해 가로 정렬 결합 텍스트 정렬: 여백이 있는 절대 위치 지정을 사용하여 중앙 및 수직 정렬을 사용하면 더 큰 경계 div 내에서 이미지를 효과적으로 중앙에 배치할 수 있습니다.

위 내용은 Div 내에서 이미지를 수직 및 수평 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!