0

私のコードは以下のとおりで、CSS を使用して画像を (水平方向と垂直方向に) 300 x 300 ピクセルの正方形の中央に配置する最良の方法を探しています。大きい画像はそのサイズに収まり、小さい画像は引き延ばさずに中央に配置する必要があります。

<table width="100%">
  <tr>
    <td><div class="300box"><img class="centeredimage" /></div></td>
    <td><div class="300box"><img class="centeredimage" /></div></td>
    <td><div class="300box"><img class="centeredimage" /></div></td>
  </tr>
</table>

CSS:

.300box {
  height: 300px;
  width: 300px;
}

.centeredimage {
  vertical-align: middle;
  text-align: center;
}

上記が間違っていることはわかっているので、より効率的な方法を見つけたいと思っています。テーブルの各行には、画像が中央に配置された 300x300 ピクセルの div が 3 つあります。

4

2 に答える 2

2

td内でdivを使用することは、テーブルを使用する他の方法よりも悪くはありません。

あなたはこれを試すことができます-

CSS：

.blocks.table td {
    width: 300px;
    height: 300px;
    border: 1px solid #ff0000;
    vertical-align: middle;
    text-align: center;
}
p.centeredimage img {
    max-height: 300px;
    max-width: 300px;
}

HTML：

<table width="100%" class="table blocks">
    <tr>
        <td>
            <p class="centeredimage" ><img src = "http://a1.sphotos.ak.fbcdn.net/hphotos-ak-ash4/185106_431273290248855_254736287_n.jpg" /></p>
        </td>

        <td>
            <p class="centeredimage" ><img src = "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/304640_10151181184992355_456123210_n.jpg" /></p>
        </td>
        <td>
            <p class="centeredimage" ><img src = "http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc7/s480x480/422953_410146439043183_1035950087_n.jpg" /></p>
        </td>
        <td>
            <p class="centeredimage" ><img src = "http://sphotos-e.ak.fbcdn.net/hphotos-ak-ash3/s480x480/561574_467101546644877_728463753_n.jpg" /></p>
        </td>
    </tr>
</table>
于 2012-09-13T06:16:45.657 に答える
0

コードをまったく同じままにして、この 1 つのスタイル定義を変更します。

.centeredimage {
  margin: auto;
}

そして、より大きな画像を強制的に 300 ピクセル以下にしたいとおっしゃいましたか? max-width 属性が時々機能することは知っていますが (もちろん、IE8 はそれを非常に嫌っています)、画像に対してどの程度うまく機能するかはわかりません (自分でテストしたことはありません)。 centeredimage クラスに max-width: 300px を追加します。

振り返ってみると、他の人が言ったことも当てはまります。.300box クラスを td に適用し、div を取り除きます。あなたが説明していることについては、それらは必要ありません。

于 2012-09-11T21:49:05.533 に答える