Question

我的代码在下面，我正在寻找通过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;
}

我知道上面的内容不正确，所以我希望找到一种更有效的方法。每个表格行有3个300x300像素的div，图像居中。

Answer 1

在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>

Answer 2

保持代码完全相同，更改此样式定义：

.centeredimage {
  margin: auto;
}

而且你说你想要更大的图像被强制不超过300像素？我知道max-width属性有时会起作用（但当然IE8非常不喜欢它），但我不知道它在图像上的效果如何（我自己没有测试过）但是要添加它，你只需要将max-width：300px添加到您的centeredimage类。

经过反思，其他一些人也说过：将你的.300box类应用到td，并摆脱div。对于你所描述的内容，它们不是必需的。

将图像居中在300像素×300像素的表格中

2 个答案: