집 > 기사 > 웹 프론트엔드 > 높이를 알 수 없는 이미지를 수직 중앙에 배치하는 방법

높이를 알 수 없는 이미지를 수직 중앙에 배치하는 방법

不言원래의: 2018-06-26 14:33:461554검색

이 글에서는 높이를 알 수 없는 사진의 세로 중심 설정 방법을 주로 소개합니다. 연습할 때 IE 브라우저의 표시 상황에 특히 주의하세요. 필요한 친구는 이를 참고할 수 있습니다.

표준 브라우저는 여전히 외부 컨테이너 #box를 사용합니다. 디스플레이 모드는 display:table-cell로 설정되어 있습니다. IE6/IE7은 img 태그 앞에 빈 태그 쌍을 삽입하는 방식을 사용합니다
201585174249665.jpg (500×400)

. 그러나 브라우저에서 구현되는 실제 효과는 완벽하지 않습니다. 다른 브라우저에 구문 분석이 다르기 때문에 각 브라우저에는 1px-3px 편차가 있습니다.
방법 1:

이 방법은 외부 컨테이너의 표시 모드를 display:table로 설정하고, img 태그 외부에 SPAN 태그를 중첩하고, SPAN의 표시 모드를 display:table-cell로 설정하는 것입니다. 물론 이것은 표준 브라우저에서만 가능하며 IE6/IE7도 위치 지정을 사용해야 합니다.
HTML code

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

CSS code

<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는 CSS를 사용합니다. .해킹.
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;   
}

이 방법에는 단점이 있습니다. 표준 브라우저에서는 외부 컨테이너 #box의 표시 모드가 display:table-cell이므로 #box는 여백 속성을 사용할 수 없으며 IE8에서는 테두리 설정이 유효하지 않습니다.
방법 3:

표준 브라우저는 여전히 외부 컨테이너 #box의 표시 모드를 display:table-cell로 설정합니다. IE6/IE7은 img 태그 앞에 빈 태그 쌍을 삽입하는 방법을 사용합니다.

HTML 코드

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

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 태그의 의사 클래스 속성을 사용합니다. 호환성을 달성하기 위한 CSS 표현식입니다.
HTML code

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

CSS code

#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 code

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

CSS code

#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의 경우 이 방법은 매우 강력합니다.
생각하기: 많은 방법이 외부 컨테이너의 표시 모드를 테이블로 설정하여 수직 중앙 정렬을 달성하는 데 의존합니다. 즉, 테이블을 시뮬레이션하기 위해 CSS에 이 효과를 얻을 수 있는 속성이 있으면 좋을 것입니다.

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

높이를 알 수 없는 이미지를 수직 중앙에 배치하는 방법

관련 기사