이 글에서는 높이를 알 수 없는 사진의 세로 중심 설정 방법을 주로 소개합니다. 연습할 때 IE 브라우저의 표시 상황에 특히 주의하세요. 필요한 친구는 이를 참고할 수 있습니다.
표준 브라우저는 여전히 외부 컨테이너 #box를 사용합니다. 디스플레이 모드는 display:table-cell로 설정되어 있습니다. IE6/IE7은 img 태그 앞에 빈 태그 쌍을 삽입하는 방식을 사용합니다
. 그러나 브라우저에서 구현되는 실제 효과는 완벽하지 않습니다. 다른 브라우저에 구문 분석이 다르기 때문에 각 브라우저에는 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 중국어 홈페이지를 주목해주세요!
관련 권장사항:
중앙 위치를 조정하기 위해 CSS에서 음수 여백 값을 사용하는 방법
DIV를 중앙에 배치하기 위해 position:fixed 속성을 사용하는 방법
위 내용은 높이를 알 수 없는 이미지를 수직 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!