垂直对齐图像和文字？

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容器设置为它。

Fiddle 2

Answer 2

你可以这样做

在用户名和样式周围添加span

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

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

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

或者，您可以在不使用span

的情况下执行此操作

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

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

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