既知のコンテナ内の未知のサイズの画像の垂直方向および水平方向のセンタリング_CSS/HTML

別段の指定がない限り、このサイトのコンテンツは 共有許可 を使用して作成されており、非営利目的で使用されます。あなたの労力の成果を尊重してください。

CSS レイアウトでは、サイズが不明な画像の垂直方向の中央揃えは常に問題であり、標準ブラウザではコンテナの line-height と画像のvertical-align:middle を設定するだけで済みますが、それは役に立ちません。 IE については、数か月前に海外の Web サイトで IE の解決策を見たことがありますが、あまり理想的ではないと感じました。最近、友人が同じような質問をしているのをよく見かけたので、コードを掘り出して IE 用に修正しました。

CSS

.box{
height:140px;
width:200px;
border: Solid 1px #666;
text-align:center;/*水平方向の中央揃え*/
line-height:140px;
font-size:126px;/*IE はここで垂直方向の中央に配置されます*/
}
.box[class]{
font-size:12px ;/*標準ブラウザにはこの値が必要です*/
}
img{
vertical-align:middle;/*標準ブラウザ画像は垂直方向の中央に配置されます*/
}

オリジナル外国人コードのフォントサイズは高さと同じです。試してみたところ、コンテナの高さの10％を差し引いて、コンテナの高さが標準ブラウザの高さよりも少し高くなりました。このように、フォントサイズはほぼ同じに見えます。理由はまだ不明です。

テストは IE5.5、IE6.0、FF1.5、Opera9.0 では成功しましたが、IE5.0 および IE7.0 では無効でした。