상위 Div 내에서 이미지를 중앙에 배치하는 방법은 무엇입니까?

상위 Div 내에서 이미지 중앙에 배치

상위 div 내에서 이미지를 중앙에 정렬하면 웹사이트 미학과 사용자 경험을 향상시킬 수 있습니다. 이 문서에서는 이러한 정렬을 효율적으로 수행하는 방법에 대해 설명합니다.

문제 설명:

이미지 중앙이 div의 중앙에 유지되도록 상위 div 내의 이미지를 정렬합니다. , 이미지가 너비를 늘리지 않고 div의 전체 높이에 걸쳐 있는지 확인합니다.

해결책:

text-align: center; 이미지 요소에 대한 CSS 선언을 상위 .box 요소에 추가합니다.

.box {

height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align: center;  // align center all inline elements

}

이 접근 방식은 다음을 보장합니다. 이미지를 포함하여 .box div 내의 모든 인라인 요소가 중앙에 위치해야 합니다.

추가 고려 사항:

이미지 아래에 5px 간격이 나타나면 인라인 요소와 관련된 기본 줄 높이로 인해 발생할 수 있습니다. 이 간격을 없애려면 수직 정렬: 하단; 이미지 요소에:

.box img {

height: 100%;
width: auto;
vertical-align: bottom; // fix the vertical gap

}

이러한 수정 사항을 구현하면 이미지를 효과적으로 중앙에 배치할 수 있습니다. 상위 div를 선택하고 원하는 모양을 확인하세요.

위 내용은 상위 Div 내에서 이미지를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!