すべての一般的な解像度で、画像を垂直方向に中央に配置できる必要があります。SO に関する多くの ppl が既にこの質問をしており、その 90% がこのチュートリアル http://www.jakpsatweb.cz/css/css-vertical-center-solution.htmlを提供しています。
答えとして。ただし、FF で 1280 x 1024 解像度のモニターで表示すると、中央に表示されません。さらに悪いことに、IE7 ではひどく壊れます。したがって、それは間違いなく答えではありません。
叶わぬ夢を追いかけているの? このソリューションは、FF および IE 6/7 で機能する必要があります。
解決策はうまくいくものなら何でもかまいませんが、少し純粋主義者ですが、テーブルよりもdivを好むでしょう:)
具体的には、このサイトhttp://www.codecookery.com/test/index.htmlに必要です
ご覧のとおり、中央に配置する必要があるスライドショーです。
このソリューションはあなたが探しているものだと思います。私はそれをテストするために IE にアクセスすることはできません (Linux を使用することで得られるものです) が、動作することにはかなりの自信があります。そして、テーブル上の div に関しては、ラッパーがまったくないのはどうですか? それだけでなく、画像がモニターの解像度よりも大きい場合は、うまく縮小されます。端に沿って少しパディングが必要な場合は、max-height と max-width を調整できます (画像が非常に大きい場合や解像度が小さい場合)。
CSS:
<style>
/* Positioning */
.absoluteCenter {
margin:auto; /* Required */
position:absolute; /* Required */
top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */
left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only */
}
/* Sizing */
.absoluteCenter { /* Fallback */
max-height:100%;
max-width:100%;
}
</style>
そしてHTML：
<img class="absoluteCenter" src="PATHTOIMAGE">
ノート：
固定高さのdivがオプションの場合、上位50％の絶対位置を使用してから、負のマージンを使用してdivを配置できます。FF3.6、IE6、IE8、Chromeで以下をテストしました。
<html>
<head>
<style>
#vertCenter {
height: 400px;
position: absolute;
top: 50%;
margin-top: -200px;
border: 1px green solid;
}
</style>
</head>
<body>
<div id="vertCenter">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</body>
</html>
ここのコードは、jakpsatweb.czのコードよりもひどいものではありません。