알려진 컨테이너에 있는 알 수 없는 크기 이미지의 수직 및 수평 중앙 정렬_CSS/HTML

별도의 언급이 없는 한, 이 사이트의 콘텐츠는 공유 승인을 통해 제작되었으며, 귀하의 노력의 결실을 존중해 주시기 바랍니다.

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

CSS

.box{
높이:140px;
너비:200px;
테두리: 단색 1px #666;
text-align:center;/*가로 중심 */
line-height:140px;
font-size:126px;/*IE는 여기에서 수직 중앙에 위치합니다*/
}
.box[class]{
font-size:12px ;/*표준 브라우저에는 이 값이 필요합니다*/
}
img{
Vertical-align:middle;/*표준 브라우저 이미지는 수직으로 중앙에 배치됩니다*/
}

원본 외국인 코드의 글꼴 크기가 높이와 같습니다. 시도해 보니 컨테이너 높이가 표준 브라우저보다 약간 높습니다. 컨테이너 높이의 10%를 빼려고 여러 번 시도했습니다. 글꼴 크기는 거의 같습니다. 이유는 아직 불분명합니다.

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