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

상위 div 내 이미지 요소 중앙에 배치

이미지를 상위 div 내 중앙에 배치하려고 할 때 원하는 결과는 다음과 같습니다. 이미지의 고유 높이를 유지하면서 수직으로 중앙에 유지되도록 합니다.

해결책:

이 효과를 얻으려면 text-align: center;를 추가하여 하위 .box img div가 아닌 상위 .box div를 사용합니다. 이 개정안은 상위 div 내의 모든 인라인 요소가 중앙에 정렬되도록 보장합니다.

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

결과적으로 업데이트된 CSS는 이미지 요소가 항상 상위 div의 중앙에 배치되어 실제 높이를 유지하도록 보장합니다. .

세로 간격 문제 해결:

추가 조사 결과 중앙 이미지 아래에 5px 간격이 나타난 것으로 확인되었습니다. 이러한 차이는 와 같은 인라인 요소에 대한 줄 높이 예약으로 인해 발생합니다. 이 간격을 없애려면 수직 정렬: 하단; 이미지의 CSS에 추가해야 합니다.

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

이 단계를 따르면 의도한 높이를 유지하면서 의도하지 않은 수직 간격을 제거하면서 이미지를 상위 div 내 중앙에 효과적으로 배치할 수 있습니다.

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