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

Question

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

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

有人请看一下demo here并提出可能的解决方案？

谢谢!

Answer 1

你不需要在这里计算东西，CSS 有解决一切的办法，诀窍是使用 display: table-cell; 和 vertical-align: middle;

CSS

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

Demo