2

我注意到，当同时使用line-height和text-align属性来居中和垂直对齐<div>标签内的图像时，由于某种原因，图像被向下推了几个像素。如果您的图像周围有大量空白，则这种更改几乎不会引起注意，但是当我在按大小的框中有一个150px按150px图像时，您可以看到图像被稍微推出的位置。有人知道为什么会这样吗？150px150px

http://jsfiddle.net/rUs5E/

4

2 回答 2

3

的定义vertical-align:middle有点奇怪。它说

“将框的垂直中点与父框的基线加上父框 x 高度的一半对齐。”

您看到的变化是“父级 x 高度的一半”组合的效果。和基线的变化，都基于字体大小。因此，您可以通过将父级（在您的 jsfiddle 中.searchLogo）的字体大小设置为零来消除它。这使得 x-height = 0 并且基线穿过盒子的中心线并且没有偏移。

见http://jsfiddle.net/rUs5E/1/

于 2013-03-13T17:36:36.793 回答
2

可能是重复的，但是：

您可以添加一个vertical-align: middle. 这与被视为角色的图像有关。我认为默认值vertical-align: baseline似乎在底部添加了 3px 之类的东西。

小提琴

于 2013-03-13T15:27:12.937 回答