固定された高さと幅の中で画像を縦横両方向にセンタリングしようとしています。私がFF、Chrome、Safari、IE8 +でうまく動作しているコードはIE7ではないので、私の人生ではうまくいきません。IE7縦横の画像センタリング
画像はさまざまな高さと幅を持つことができますが、私が良い修正を見つけることができない場合、私は高さを厳しくして、試したセンタリングテクニックに戻すことができます。
ライブの例では、jsfiddle
誰でもで任意の鮮やかなアイデアですか？
<img>要素は、我々は、テキストのと同じようにそれらを中央にすることができ、デフォルトでdisplay: inline;なので：アイデアのように
a {
height: 180px;
width: 150px;
display: block;
text-align: center;
border: 1px solid black;
margin: 10px;
line-height: 180px;
}
a img {
vertical-align: middle;
}
私は以前この醜い問題を抱えていました。私はこれを次のように解決しました。アイデアは、背景画像としてCSSを使用した画像です。私はそれがie7で動作すると思います。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">
#wm_splash{
position: absolute;
top: 0;
left: 0;
}
#wm_splash_loading {
background-image: url('images/loading.gif'); /* the loading image (animated gif)*/
height: 80px; /* loading image height */
width: 285px; /* loading image width*/
padding: 0px 0 0 0px;
text-align: center;
}
</style>
<title>Loading...</title>
</head>
<body>
<div id = "wm_splash" style = "width : 100% ; height : 100%">
<table width = "100%" height = "100%" >
<tbody>
<tr>
<td width = "100%" height = "100%" align = "center" valign = "middle">
<div id = "wm_splash_loading"> loading... </div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
が、本当に私たちが使用しているCMSのおかげで可能ではありませんプロジェクトで – DanC
これをまだ試していないが、buz-nizと思われる！乾杯！ – DanC
これは私のIE7の問題を解決しましたが、何らかの理由でWebkitブラウザでは機能しません！なぜどんなアイデア？ – DanC
これはChrome 16でうまく動作します。 'line-height'と' height'が同じであることを確認してください：http://jsfiddle.net/Daniel_Hug/63yaQ/1 –