2

固定幅と高さのブロック レベル要素内の画像 (可変幅と高さ) を中央揃えにする必要があります。CSS マークアップは次のようになります。

<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="50" height="60"></div>
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="60" height="50"></div>
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="75" height="75"></div>

ポイントは、画像がコンテナー div の右上隅に揃えられることです。それらを水平方向と垂直方向の両方で中央に配置したい。次のようにimgタグのスタイルを設定しようとしました：

img {
display: block;
margin: auto;
}

これにより、img が水平方向に中央揃えになりますが、垂直方向には中央揃えになりません。ギャラリー ページがきれいに配置されるようにするには、両方が必要です。これにより、必要な結果が正確に生成されますが、テーブルの使用は絶対に避ける必要があります。ポータブルでハックレスな CSS ソリューションが必要です。

4

1 に答える 1

14

はい、垂直マージンは水平マージンとは根本的に異なる方法で計算されます。「自動」はセンタリングを意味しません。

画像要素に 'vertical-align: middle' を設定すると、ある程度は機能しますが、現在配置されているライン ボックスに対してのみ配置されます。ライン ボックスをフロートと同じ高さにするには、コンテナに 'line-height' を設定します。

<style>
    div { float: left; width: 100px; height: 100px; line-height: 100px; }
    div img { vertical-align: middle; }
</style>

これが機能するには、標準モードである必要があります。そうしないと、ブラウザは、テキスト ライン ボックス内の要素をインラインで置換するのではなく、独自の画像をブロックとしてレンダリングするためです。

残念ながら、IE (少なくとも 7 まで) は、標準モードを試みてもブロック動作を維持します。これには技術的な理由があります。つまり、IE はパンツです。

画像がテキスト行の一部であることを本当に意味していることを IE に納得させるには、div 内にテキストを追加する必要があります。

<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="50" height="60" />&#8203;</div>
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="60" height="50" />&#8203;</div>
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="75" height="75" />&#8203;</div>
于 2009-04-06T11:17:22.857 に答える