php - 垂直对齐网格中的图像 (CSS)

Question

我已经搞砸了一段时间，我的客户坚持认为通过 CSS 手动设置图像的位置不是一个可接受的解决方案。基本上，我试图将父 DIV（具有静态高度）中的图像垂直居中。

我正在考虑通过 PHP 计算图像大小，然后为每个图像设置 CSS 规则，但想象这过于复杂了。

有人可以看看这里的演示并提出潜在的解决方案吗？

谢谢！

score 3 · Accepted Answer

你不需要在这里计算东西，CSS 可以解决所有问题，诀窍是使用display: table-cell;withvertical-align: middle;

CSS

div {
    display: table-cell;
    height: 300px;
    border: 1px solid green;
    vertical-align: middle;
}

score 1 · Accepted Answer

这是<table>元素的情况。可以说是表格数据。

当你这样做时，你可以给表格单元格一个vertical-align：

table td { vertical-align: middle; }

score 0 · Accepted Answer

如果你想避免使用表格样式，你可以这样做：

div {
    height: 300px;
    line-height: 300px;
}
div img {
    vertical-align: middle;
}

3 回答 3