在<div>标签</div>中居中/垂直对齐图像

Question

我注意到，当同时使用line-height和text-align属性将<div>标记内的图像居中并垂直对齐时，由于某种原因，图像会被一对夫妇按下像素。如果您的图片周围有大量空白，则此更改几乎无法显示，但是当我在150px到150px大小的框内有150px个150px图片时，您可以看看图像被轻微推出的位置。有谁知道为什么这样做？

http://jsfiddle.net/rUs5E/

Answer 1

vertical-align:middle的定义有点奇怪。 It says

  

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

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

请参阅http://jsfiddle.net/rUs5E/1/

Answer 2

Possibly a duplicate但是：

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

Fiddle