图像和文本垂直对齐？

Question

我有一个如下所示的锚标记设置，

<a href='' title='' class='video-author-box hoverbox'>
    <img style='height:32px;' src='IMAGE_URL' alt='' /> 
    Username
</a>

问题是文本与图像顶部对齐，但我希望文本在锚和图像的中间对齐。

示例： http://jsfiddle.net/qZFFX/2/

Answer 1

这里有两个简单的解决方案：

1. 删除图像的 float: left ，这样它将变成内联，并添加 vertical-align: middle

Fiddle 1

1. 如果您知道图像的高度（在您的情况下为 32px），请设置 line-height它的容器。

小提琴 2

Answer 2

您可以

在用户名和样式周围添加 span ，如下所示

.video-author-box span{
    display:inline-block;
    padding-top:8px;
}

示例： http:// /jsfiddle.net/qZFFX/3/

然后您可以根据需要调整填充。

或者，您可以不使用 span

.video-author-box{
    display:inline-block;
    padding-top:8px;
}

.video-author-box img{
    margin-top:-6px;
}

示例 2：http:// jsfiddle.net/qZFFX/5/