垂直对齐图像和文字？

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图像的float: left ，因此它将变为内联，并添加vertical-align: middle

小提琴1

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

小提琴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/