2

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

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

我该怎么做才能在此链接中垂直居中图像？

4

2 回答 2

1

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

希望能帮助到你。

于 2012-10-11T17:50:27.807 回答
0

尝试

vertical-align: -5px;

结果如下：

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

于 2012-10-11T16:47:20.677 回答