html - 仅使用 css 将图像内部容器元素垂直居中

Question

我需要<li>使用 CSS 在它们的容器块内垂直居中一些图像，但我不知道如何去做。我可以求助于使用 javascript 来计算图像的高度，然后使用边距进行一些数学运算以使其垂直居中，但这看起来既笨重又愚蠢。

有没有很好的基于 CSS 的解决方案来完成垂直对齐而不使用固定边距（图像高度是可变的）？

贴在容器 li 元素顶部的图像：

在此处输入图像描述

score 3 · Accepted Answer

您可以使用此 css 属性：

display: table-cell; vertical-align: middle;

score 0 · Accepted Answer

0

这可能会解决您的问题：

vertical-align: middle;

于 2012-10-04T01:50:43.957 回答

score 0 · Accepted Answer

0

这是我一直在使用的..
vertical-align: middle;

于 2012-10-04T01:54:10.663 回答

score 0 · Accepted Answer

Fredy 的回答对于现代浏览器是正确的，但不适用于 IE pre 8。其他技术： http: //phrogz.net/css/vertical-align/index.html

score 0 · Accepted Answer

0

于 2012-10-04T02:16:27.197 回答

5 回答 5