컨테이너_CSS/HTML에서 알 수 없는 크기의 이미지 세로 및 가로 가운데 맞춤 문제

CSS 레이아웃에서는 크기를 알 수 없는 이미지의 수직 중앙 정렬이 항상 골치 아픈 문제였습니다. 표준 브라우저에서는 컨테이너의 줄 높이와 이미지의 수직 정렬:중간만 설정하면 됩니다. 몇 달 전, 저는 외국 웹사이트 에서 IE에 대한 해결책을 보았습니다. 저는 그것이 이상적이라고 생각하지 않았고 심각하게 받아들이지도 않았습니다. 최근에 비슷한 질문을 하는 친구들이 종종 보이는데, 코드를 파헤쳐 IE용으로 수정했습니다.

CSS
.box{
높이:140px;
너비:200px;
테두리: 단색 1px #666;
텍스트 정렬: center;/*가로 가운데 맞춤*/
line-height:140px;
font-size:126px;/*IE 세로 가운데 맞춤*/
}

.box[class] {
font-size:12px;/*표준 브라우저에는 이 값이 필요합니다*/
}

img{
vertical-align:middle;/*표준 브라우저 이미지는 세로로 가운데 정렬됩니다* /
}

원래 외국인 코드의 글꼴 크기는 높이와 동일했습니다. 시도해 보니 컨테이너 높이가 표준 브라우저보다 약간 높았습니다. 글꼴 크기를 100% 줄이면 컨테이너 높이가 거의 같아집니다. 이유는 아직 불분명합니다.

IE5.5, IE6.0, FF1.5, Opera9.0에서는 테스트가 성공했지만 IE5.0 및 IE7.0에서는 유효하지 않습니다.