html - <span> 和 <a> 标签没有垂直对齐

Question

我正在尝试使用 sprite 图像创建用于在 Facebook、twitter 等上关注的链接。在由这些设置为背景的 Sprite 图像组成的链接之后有一个纯文本。我在垂直对齐文本、跨度和“a”链接时遇到问题。

这是CSS

.sprite a {
    border:solid 1px blue;
    width:20px;
    height:20px;
    display:inline-block;
    color:#00f;
    background:url('images/sprite.png') 0 0;
}

span {
    border: solid 1px red;
}

这是HTML

<div class="sprite">
    Follow us on: <span id="spriteFacebook"><a href="http://facebook.com"></a></span>
</div>

我使用边框只是为了识别错位

结果是这样的

这些不应该默认对齐吗？我应该使用 float div 来实现吗？

Answer 1

试试看:
- 将文本包裹起来:<span class="text">Follow us on:</span>
- 向左浮动并给它一个行高:span.text { float: left; line-height: 33px; }

http://jsfiddle.net/6s4HM/20/