将 300 像素 x 300 像素表格网格内的图像居中答案

【问题标题】：Centering images within 300 px by 300 px table grid将 300 像素 x 300 像素表格网格内的图像居中
【发布时间】：2012-09-04 21:20:41
【问题描述】：

我的代码在下面，我正在寻找通过 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，其中图像居中。

【问题讨论】：

这里有一些解决方案，虽然我不确定你是否能够实现它们：blog.themeforest.net/tutorials/vertical-centering-with-css
您需要div 环绕img 吗？您可以将vertical-align 和text-align 添加到td，这样就可以了。
另外，类名不应该以数字开头试试.box300
抛弃 div 和 image 类，直接将 .300box 和 .centeredimage 样式应用到你的 ...
这种技术不起作用，图像水平居中而不是垂直居中。垂直部分似乎没有粘住。

【解决方案1】：

让你的代码完全一样，改变这个样式定义：

.centeredimage {
  margin: auto;
}

您说您希望较大的图像被强制不超过 300 像素？我知道 max-width 属性有时会起作用（当然 IE8 非常不喜欢它），但我不知道它在图像上的效果如何（我自己从未测试过），但要补充一点，你只是将 max-width: 300px 添加到 centeredimage 类中。

经过反思，其他人所说的也适用：将 .300box 类应用于 td，并摆脱 div。根据您的描述，它们不是必需的。

【讨论】：

这种技术不起作用，图像水平居中但不是垂直居中。垂直部分似乎没有粘住。
可以附上截图吗？并且：对于垂直居中，您希望每个图像在其表格单元格中居中，并且该行中的图像可能具有不同的大小，对吗？

.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; }