这里有一把小提琴：http://jsfiddle.net/sAuhsoj/zSGLy/3/
我正在尝试将链接中的图像垂直居中。链路具有固定的height属性，并且line-height被设置为等于该属性。我试图通过设置vertical-align: middle;来垂直居中图像，这是我以前使用过的一种技术，但不一定用于这个确切的目的，然而，图像似乎太低了。我不明白为什么会发生这种事。我删除了所有不相关的CSS属性，我认为这可能会产生效果，但正如你所看到的，即使删除了所有无关的属性，图像也不会移动到中心。如果将锚点元素的height和line-height设置为20px(与图像的高度相同)，并且图像从链接底部突出，则可以更好地看到这个问题(请参见http://jsfiddle.net/sAuhsoj/zSGLy/4/)。
我可以做些什么来垂直居中这个链接中的图像？
@udidu提供的答案适用于您的案例。但是，您必须注意，图像不居中的主要原因是应用于<a>.link的css属性line-height。此处的代码示例http://jsfiddle.net/zSGLy/6/
如果您意外地继承了任何不同的cssline-height属性，则每次都需要重新检查和调整设置vertical-align:-5px的解决方案。
有几种方法可以解决这个问题：
第一种方法
如果你真的需要这个图像，你必须通过设置垂直定位来对它有点生气。如果不需要的话，这是我不喜欢使用的一种方法，因为您需要在混合中使用另一个<span>元素。
line-height: 1;非常重要。小提琴在这里http://jsfiddle.net/zSGLy/8/
HTML:
<a href="javascript:void(0)" class="link">
<span><img src="http://energenius.co.uk/dash/img/settingsIcon.png" /></span>
</a>
CSS：
.link {
display: inline-table;
background-color: red;
height: 30px;
/* just to make the problem more obvious */
width: 100px;
text-align: center;
line-height: 30px;
}
.link > span {
height: 100%;
display: table-cell;
vertical-align: middle;
line-height: 1;
}
第二种方法
关于将内容与表示分离的概念(样式表的作用)，更好的方法是将图像设置为背景图像。
此处的示例：http://jsfiddle.net/zSGLy/9/
CSS：
.link {
display: inline-block;
background-color: red;
height: 30px;
/* just to make the problem more obvious */
width: 100px;
text-align: center;
/* bg image*/
background-image: url(http://energenius.co.uk/dash/img/settingsIcon.png);
background-repeat: no-repeat;
background-position: center center;
}
HTML:
<a href="javascript:void(0)" class="link"></a>
希望能有所帮助。
尝试
vertical-align: -5px;
结果如下：
http://jsfiddle.net/zSGLy/5/