div
解決策は、をテーブルに変更することです。通常、ポジショニングにテーブルを使用するべきではありませんが、標準に準拠していない古いブラウザの場合は、それが唯一の選択肢である場合があります。 ここでのデモンストレーション。ちなみに、これはInternetExplorer6でも機能します。
コード:
CSS
#theDiv
{
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#theImg
{
max-width: 190px;
max-height: 190px;
}
HTML
<table id="theDiv" style="border: solid 1px #000">
<tr>
<td>
<img id="theImg" src="http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg" />
</td>
</tr>
</table>
マークアップを実際のテーブルに変更する代わりにCSSを使用する更新は次のとおりです。
#theDiv
{
display: table;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#theImg
{
max-width: 190px;
max-height: 190px;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
vertical-align: middle;
}
<div id="theDiv" style="border: solid 1px #000">
<div class="tr">
<div class="td">
<img id="theImg" src="http://lorempixel.com/100/100/" />
</div>
</div>
</div>