너비와 높이가 가변적인 div 내에서 이미지를 세로로 가운데에 맞추는 CSS 스타일

이 글에서는 가변 너비 및 높이 div에서 이미지의 세로 중심 정렬을 위한 CSS 스타일을 주로 소개합니다. 이제 특정 참조 가치가 있으므로 필요한 친구들이 참고할 수 있도록 공유합니다.

이 글에서는 주로 CSS 스타일을 소개합니다. 가변 너비와 높이로 이미지를 수직으로 가운데에 배치하는 방법. p에서 이미지를 수직으로 가운데에 배치하는 방법과 CSS 스타일을 작성하는 방법은 무엇입니까? 샘플 코드는 다음과 같습니다

가장 간단한 방법은 외부 요소의 CSS 속성을 설정하는 것입니다.

p{ 
display: table-cell; 
}

그러나 IE6/7에서는 이러한 CSS 스타일을 지원하지 않으므로 다음 방법을 사용할 수 있습니다. .

html의 구조는 다음과 같습니다.

<p><span></span><img src="test.png" alt=""></p>

Css 코드는 다음과 같습니다.

p{ 
width: 100px; 
height: 100px; 
border: 1px solid #ccc; 
} 
span{ 
line-height: 100%; 
vertical-align: middle; 
display: inline-block; 
height: 100%; 
} 
img{ 
width: 100%; 
vertical-align: middle; 
}

위 속성을 설정하면 아래 그림과 같은 효과를 얻을 수 있습니다.

이 방법의 원리는 img 태그 앞에 빈 스팬 태그를 삽입하고 이를 사용하여 p 내의 행 높이를 100%까지 확장하는 것입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장사항:

높이를 알 수 없는 이미지의 세로 중앙 정렬 설정 방법

CSS 배너 이미지의 반응형 중앙 정렬 표시 방법 정보

위 내용은 너비와 높이가 가변적인 div 내에서 이미지를 세로로 가운데에 맞추는 CSS 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!