未知の寸法画像の中央css解決方法
未知のサイズの画像の中央には、よくある問題です.ただし、ここではまず、未知のサイズのピクチャとは、プログラムが一定のサイズ制限を制御した場合に、現在のコンテナよりもサイズが小さいピクチャを指す.
現在一般的な解決策はdisplayとfontSizeのhackを利用して,意味のないラベルをできるだけ減らすことである.
上のコード:
ps:ここではdisplayのhackのほか、主にfont-sizeが使われています.その値の設定については、現在の容器の高さを1.14で割って整頓しますが、実際の状況によっては、その上で測定を行い、適切な修正値に変更する必要があります.(なぜこの数なのか聞かないでください.しばらくは説明できません)外のdiv容器は余分な無意味ラベルといえば、必要に応じてaラベルに置き換えることができます.一般的な画像にはリンクがあります.さもないと、もっと文句を言うなら、jsで外のこのラベルを生成しましょう.
[転入:http://www.impng.com/web-dev/unhnow-size-images-middle-by-css.html]
現在一般的な解決策はdisplayとfontSizeのhackを利用して,意味のないラベルをできるだけ減らすことである.
上のコード:
<html>
<head>
<title>impng </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html,body,div,img{margin:0;padding:0;font-size:12px;}
.pic_wrap{width:150px;height:150px;border:1px solid red;}
.pic_wrap{display:table-cell;vertical-align:middle;+display:block;+font-size:139px;text-align: center;}/* fontSize=height\1.14 */
.pic_wrap img{border:1px solid #999;}
</style>
</head>
<body>
<div class="pic_wrap">
<img src="http://10.0.3.51:8080/portal-html/images/ipbg.gif" alt=" " />
</div>
</body>
</html>ps:ここではdisplayのhackのほか、主にfont-sizeが使われています.その値の設定については、現在の容器の高さを1.14で割って整頓しますが、実際の状況によっては、その上で測定を行い、適切な修正値に変更する必要があります.(なぜこの数なのか聞かないでください.しばらくは説明できません)外のdiv容器は余分な無意味ラベルといえば、必要に応じてaラベルに置き換えることができます.一般的な画像にはリンクがあります.さもないと、もっと文句を言うなら、jsで外のこのラベルを生成しましょう.
[転入:http://www.impng.com/web-dev/unhnow-size-images-middle-by-css.html]