サイズ不明の画像をサイズ既知のコンテナに縦横センタリングで再投稿(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 用に 2 つの単純なスタイルのセットが作成されています。

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>

著者の例は 1 ページに 6 枚の写真を含めるように拡張したもので、デモ アドレス で使用できます。