0

オンラインフォトギャラリーがあります。サムネイル ページは 150px x 150px の div のグリッドで、サムネイル画像はその中に設定されます。

サムネイル画像は長方形なので、div 内で自動的に中央に配置するのが理想的です。

ここを読んで、それらを水平方向に中央に配置する方法を見つけました。また、CSS3 が採用されるまで、垂直方向の自動センタリングはできないということも読んでいます。これは本当ですか？

これで水平方向の画像を自動中央に配置しました：

.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}

ただし、垂直方向のセンタリングはこれでは機能しません。

.landscape_t {
width: 150px;
height: auto;
display: block;
margin: auto 0 auto 0;
}

CSS3までこれを行う方法がない場合は、回避策を考え出す必要がありますが、何か不足している場合はお知らせください.

ご協力いただきありがとうございます。

4

1 に答える 1

2

<img>サイズの親<div>要素内にインライン要素 ( ) があります。

<div>
    <img />
</div>

あなたがする必要があるのは、それを中央と中央に揃えることだけです. text-align:center;親の中央に配置し、完全な高さ<div>を指定して中央に配置します。さらに、それはタグであるため、そのイメージタグに、それ自体のサイズに関係なく、そこにあるタグを付けます:<div>line-height<img>vertical-align:middle;

ここに画像の説明を入力

例/デモ:

<style>
div {width:350px; height:350px; line-height:350px; text-align:center;}
  div img {vertical-align:middle;}​
</style>

<div>
  <img src="http://i.imgur.com/PKnWs.jpg">
</div>
<div>
  <img src="http://i.imgur.com/Az6NUl.jpg">
</div>
于 2012-06-14T20:29:39.807 に答える