CSS 및 이미지 속성을 사용하여 상위 Div의 이미지를 완벽하게 중앙에 배치하는 방법은 무엇입니까?

중앙 이미지: 상위 Div 내에서 이미지 정렬 가이드

HTML에서 이미지 작업을 할 때 수평으로 중앙에 배치하는 것이 바람직한 경우가 많습니다. 그들의 부모 div. 이를 달성하려면 CSS 속성과 요소 속성을 모두 신중하게 고려해야 합니다.

CSS 사용

상위 div 내에서 이미지를 가운데에 배치하려면 텍스트를 추가할 수 있습니다. 정렬: 중앙; 상위 div의 CSS에 대한 선언입니다. 이렇게 하면 이미지를 포함하여 div 내의 모든 인라인 요소가 정렬됩니다.

<code class="CSS">.box {
    text-align: center;
}</code>

이미지 높이 및 자동 너비 사용

이미지 높이가 100%인지 확인하세요. 자동 너비. 이렇게 하면 가로 세로 비율을 유지하면서 이미지 높이가 상위 div에 맞게 늘어납니다.

<code class="CSS">.box img {
    height: 100%;
    width: auto;
}</code>

세로 간격 해결

어떤 경우에는 이미지 아래 수직 간격. 이는 와 같은 인라인 요소와 연관된 줄 높이 예약 문자 때문입니다. 이 간격을 제거하려면 수직 정렬: 하단;

<code class="CSS">.box img {
    vertical-align: bottom;
}</code>

결론

CSS 정렬과 적절한 이미지 크기 조정의 조합을 활용하면 상위 div 내에서 이미지를 효과적으로 중앙에 배치할 수 있습니다. 이 기술은 웹페이지 요소에 일관되고 시각적으로 매력적인 레이아웃을 제공합니다.

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