크기를 알 수 있는 컨테이너에 크기를 알 수 없는 이미지를 가로, 세로 중앙에 다시 게시(2)_경험교류

이것은 알려진 크기의 컨테이너에 있는 알 수 없는 크기의 이미지를 수평 및 수직으로 중앙에 배치하는 예입니다. 원제: "알려진 크기의 외부 컨테이너에 알 수 없는 크기의 이미지를 중앙에 배치", 작성자: Stu Nicholls 형식: http://www.cssplay.co.uk/menu/centered.html , 2006년 10월 15일 발행.

이 기사는 forestgan에서 2006년 10월 17일에 번역하여 게재한 것입니다. 더 많은 기사.

이 수평 및 수직 중앙 정렬 예는 IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape에서 정상적으로 작동할 수 있으며 IE용과 IE 이외용으로 두 가지 간단한 스타일 세트가 작성되었습니다.

IE는 인라인 블록을 사용하고, 비 IE는 테이블 셀과 수직 정렬을 사용합니다.

CSS

/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8; 
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}<br><!--[if IE]>
<style type="text/css">
/* vertical align for IE */
#edge {width:0; height:100%; display:inline-block; vertical-align:middle;} 
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->

xhtml

<div class="holder"><br><span id="edge"></span> <br><span id="container"><img src="graphics/homework.jpg" alt="" /></span><br></div><br>

작가의 예는 한 페이지에 6개의 사진을 포함하도록 확장하여 데모 주소에 사용할 수 있습니다.