firefox,IEの両方で縦横真ん中にしたい

質問

CSSについて質問です。
firefoxでは下記を記載し、たてよこの真ん中に表示することができました。
IEではセンターにすることはできましたが、ミドルにすることができませんでした。
IEでもミドルにできる方法を教えてください。
（質問が悪かったので再度質問させてください）
.imgbox{
width:160px;
height:160px;
display:block;
display:table-cell;
vertical-align:middle;
}
div.album2 ol{
display:block;
list-style:none;
margin:0;padding:0;
}
div.album2 ol li{
display:block;
list-style:none;
margin:0;padding:0;
text-align:center;
}
.imgtf{
max-height:160px;
max-width:160px;
}

<div class="imgbox">
<div class="album2">
<ol>
<li><a href="./popphp"><img class="imgtf" src="images/thumbnail/eee.gif"></a></li>
</ol>
</div>
</div>

よろしくお願いします。

回答No.3

think49

display: table-cell; は IE8 から実装されたプロパティです。
http://msdn.microsoft.com/ja-jp/library/cc351024%28VS.85%29.aspx
IE7 以下では display: table-cell; に依存しない書き方をする必要があります。
http://jsfiddle.net/EaCg3/1/

回答No.2

DrFell

私の感覚ではなぜリスト？無理やり、やってみました。
できないなら他に問題があります。とりあえず、ｃｓｓ部分を差し替えてみてください。他の記述もあるでしょうからセレクタはなるべく尊重しましたが、正直疑問符がつきます。

私も含めて、いいかげんな回答者もいます。わかっていない故に正しい解答を誤解する場合もあります。回答も玉石混合です。liを勧められたからといって自分のソースをふさわしくもないのにliにするのはどうかと思います。回答はあくまで、「ヒント」自分の頭で考えてください。この回答は前回の回答となんら変わりません。３回目は遠慮します。ちなみに、vartical-alignはテーブルセルとインライン要素に対して有効ですしdisplay:block;display:table-cell;などと書いても、1つの値（後者）しか持てません。

a img{border:none;}
.imgbox{
width:160px;
height:160px;
display:table;
}
div.album2 ol{
margin:0;padding:0;
display:table-row;
}
div.album2 ol li{
margin:0;padding:0;
height:160px;
width:160px;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.imgtf{
max-height:160px;
max-width:160px;
}

回答No.1

ORUKA1951

★CSS★親ボックスの中で子ボックスを真ん中に。 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7125049.html )
の回答をよくお読みください。
<ol>
<li><a href="./popphp"><img class="imgtf" src="images/thumbnail/eee.gif"></a></li>
</ol>
と言うマークアップでは、どのように工夫しても画像サイズが不定の場合、画像をセンター配置できません。理由は、IEの致命的なバグです。置換インライン要素の縦サイズを参照できない・・

<a href="./popphp"><img class="imgtf" src="images/thumbnail/eee.gif"></a>
のマークアップは、検索エンジンや他のユーザーエージェントを考えるとよいものではありません。alt(代替テキスト)で具体的なテキストを書きます。
　もし、それを書くなら
<a href="./popphp" style="background-image:images/thumbnail/eee.gif"><span>代替テキスト</span></a>
としても良いです。

　それよりも、その画像を使ったリンクが文書の中でどういう位置付けなのかをまず提示してください。
　単にひとつの画像--リンク先のアイコン--を入れるためだけなのですか?

　重要な基本ですが、HTMLは、文書を構成する要素に分解して、その構成要素をマークアップする言語です。ナビゲーションリストなら
<div class="nav"><!-- ナビゲーションのブロックであることを示して -->
　<ol><!-- ないしul -->
としますし、
　単なるひとつのリンクでしたら、
<p><a href="">ターゲット名</a></p>
　でしょう。

　それらを含めて具体的に示してください。