Question

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

我正在尝试将链接中的图像垂直居中。该链接具有固定的height属性，line-height设置为等于该属性。我试图通过设置vertical-align: middle;来垂直居中图像，这是我之前使用的技术，但不一定是出于这个目的，但是，图像看起来太低了。我不明白为什么会这样。我删除了所有不相关的CSS属性，但我可能会产生影响，但正如您所看到的，即使删除了所有不相关的属性，图像也不会移动到中心。如果将锚元素的height和line-height设置为20px（与图像的高度相同）并且图像从链接的底部伸出，则可以更好地查看此问题（请参阅{ {3}}）。

如何在此链接中垂直居中显示图像？

Answer 1

@udidu提供的答案适用于您的案例。但是，您必须注意，图片不居中的主要原因是由于应用于line-height <a>的css属性.link。您的代码示例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/

无法在线垂直居中图像

2 个答案: