无法垂直居中在线图像

Question

这是一个小提琴： http://jsfiddle.net/sAuhsoj/zSGLy/3/

我正在尝试将链接中的图像垂直居中。该链接具有固定的height 属性，line-height 设置为等于该属性。我试图通过设置使图像垂直居中：vertical-align: middle;，这是我以前使用过的一种技术，但不一定用于这个确切的目的，但是，图像似乎太低了。我不明白为什么会这样。我删除了所有不相关的 CSS 属性，尽管这些属性可能会产生影响，但正如您所见，即使删除了所有不相关的属性，图像也不会移动到中心。如果将锚元素的height 和line-height 设置为20px（与图像高度相同）并且图像从链接底部突出（参见http://jsfiddle.net/sAuhsoj/zSGLy/4/），您可以更好地看到这个问题。

如何使此链接中的图像垂直居中？

Answer 1

@udidu 提供的答案适用于您的情况。但是，您必须注意，图像不居中的主要原因是应用于您的<a> .link 的css 属性line-height。此处代码示例http://jsfiddle.net/zSGLy/6/

如果您不小心继承了任何不同的 css line-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>​

希望对你有帮助。

Answer 2

试试

vertical-align: -5px;

结果如下：

http://jsfiddle.net/zSGLy/5/