<p class="sycode"> </p> <p class="sycode"> 1. 画像定義サイズ </p> <p class="sycode">.div{ border:1px Solid #000;width:200px; <br> height:200px;position:relative; <br> location:absolute; <br>左:50%; <br> マージン:-50px 0 0 -50px; <br> 高さ:1px; <br><div> http://handl163.blog.163.com/blog/" class="img" /></div> <br></body> <br> <br> <br> <br> <br> 2. 画像には定義されたサイズがありません html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http : //www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html" /> <br> < ;title>配置を使用して縦方向の画像を表示する</title> <br> <br><style type="text/css"> <br>.miao{width:170px;height:100px;display:table;text- align:center;border :solid 1px red;} <br>.miao span{display:table-cell;vertical-align:middle;} <br>.miao span img{border:dashed 1px green;} <br></style> ;!--[ IE 7 の場合]> <br><style type="text/css"> <br>.miao{position:relative;overflow:hidden;} <br>.miao span{position:absolute;left:50 %;top:50 %;} <br>.miao スパン img{position:relative;left:-50%;top:-50%;} <br></style> <br><![endif]--> <br><body> <br><h1>高さと幅が固定されたコンテナでは、画像は垂直方向の中央に配置されます。 </h1> <br><div class="miao"> <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="ロゴ" /></span> <br><hr /> <br><span< ;img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="ロゴ" /></span> <br><hr /> <div class="miao" style="width:500px;height:220px;"> <br> <span><img src="http://www.google.cn/intl/zh-CN/images /logo_cn.gif" alt="Google" /></span> <br></div> <br></body> <br></html> <br> <br> <br> <br> <br> <br></p>
