알 수 없는 높이의 그림이div 설정에서 수직으로 가운데에 있습니다

방법1:

이 방법은 외부 용기의 디스플레이 모드를 디스플레이:table로 설정하고,img 라벨 외부에 span 라벨을 덧붙이고,span의 디스플레이 모드를 디스플레이:table-cell로 설정하면vertical-align을 표 요소처럼 쉽게 정렬할 수 있다.물론 이것은 표준 브라우저에서만 IE6/IE7은 포지셔닝을 사용해야 한다.HTML 코드
 

<div id="box">
<span><img src="images/demo.jpg" alt="" /></span>
</div>

CSS 코드

<style type="text/css">
#box{
    width:500px;height:400px;
    display:table;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
#box span{
    display:table-cell;
    vertical-align:middle;
}
#box img{
    border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
    position:relative;
    overflow:hidden;
}
#box span{
    position:absolute;
    left:50%;top:50%;
}
#box img{
    position:relative;
    left:-50%;top:-50%;
}
</style>
<![endif]-->

방법2:

방법2와 방법1의 실현 원리는 대동소이하고 구조도 같으며 방법1은 조건주석을 사용하고 방법2는 CSSHack을 사용한다.CSS 코드

<style type="text/css">
#box{
    width:500px;height:400px;
    overflow:hidden;
    position:relative;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid #d3d3d3;background:#fff;
}
#box span{
    position:static;
    *position:absolute; /*  IE6/7 Hack*/
    top:50%; /*  IE6/7 Hack*/
}
#box img {
    position:static;
    *position:relative; /*  IE6/7 Hack*/
    top:-50%;left:-50%; /*  IE6/7 Hack*/
    border:1px solid #ccc;
}
</style>

이 방법은 표준 브라우저에서 외부 용기 #box의 디스플레이 모드가 디스플레이:table-cell이기 때문에 #box에서margin 속성을 사용할 수 없고 IE8에서 테두리를 설정하는 것도 무효입니다.

방법 3:

표준 브라우저는 외부 용기 #box의 디스플레이 모드를 디스플레이:table-cell로 설정하고 IE6/IE7은img 탭 앞에 빈 탭을 삽입하는 방법입니다.
HTML 코드

<div id="box">
    <i></i><img src="images/demo.jpg" alt="" />
</div>

CSS 코드

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
	display:inline-block;
	height:100%;
	vertical-align:middle
	}
#box img {
	vertical-align:middle
	}
</style>
<![endif]-->

메서드 4:

img 라벨 외에 p 라벨을 감싸고 표준 브라우저는 p 라벨의 위조 속성:before를 사용하고 IE6/IE7은 CSS 표현식을 사용하여 호환성을 실현한다.HTML 코드

<div id="box">
    <p><img src="images/demo.jpg" alt="" /></p>
</div>

CSS 코드

#box{
	width:500px;height:400px;
	text-align:center;
	border:1px solid #d3d3d3;background:#fff;
}
#box p{
	width:500px;height:400px;
	line-height:400px; /*        */
}
 
/*         */
#box p:before{
	content:"."; /* <a href="http://casinogreece.gr/">????????????</a>            ，         */
	margin-left:-5px; font-size:10px; /*       BUG */
	visibility:hidden; /*       */
}
 
#box p img{
	*margin-top:expression((400 - this.height )/2); /* CSS       IE6/IE7 */
	vertical-align:middle;
	border:1px solid #ccc;
}

사용:beforr라는 방법은 표준 브라우저에 있어서 비교적 기똥차고 부작용도 발견되지 않았지만 IE6/IE7에 대해 성능에 대한 요구가 비교적 높으면 CSS 표현식의 방법은 신중하게 사용해야 한다.

방법5:

이 방법은 IE6/IE7에 대해 그림 외부 용기의 글씨체 크기를 높이의 0.873배로 설정하면 가운데를 배치할 수 있고 표준 브라우저는 위의 방법으로 호환성을 실현할 수 있으며 구조도 우아하다.HTML 코드

<div id="box">
    <img src="images/demo.jpg" alt="" />
</div>

CSS 코드

#box{
    width:500px;height:400px;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
    
    /*         */
    display: table-cell;
 vertical-align:middle;
    
    /*   IE6/IE7 */
    *display:block;
    *font-size:349px; /*            0.873  400*0.873 = 349 */
    *font-family:Arial; /*    utf-8   hack    ， gbk   */
}
 
#box img{
    vertical-align:middle;
}

글씨체의 크기를 설정하는 방법은 느낌이 괴이하고 합리적인 해석도 보지 못했다. 그림 요소가 다른 요소와 다른 특성이 있다는 것만 알았을 뿐이지만IE6/IE7에 있어 이 방법은 비교적 기똥차다.사고: 많은 방법은 외부 용기의 디스플레이 모드를 테이블로 설정해야만 수직 가운데를 실현할 수 있다. 즉div로 테이블을 모의할 수 있다.