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

Answer 2

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

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

table td { vertical-align: middle; }

Answer 3

如果要避免使用表格样式，可以执行以下操作：

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