图像和文本垂直对齐？答案

【问题标题】：Vertical align on image and text?图像和文本垂直对齐？
【发布时间】：2011-12-18 22:26:49
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

我会支持你，但我的票数已满。不知道为什么，但我认为这是 OP 想要的 bottom。 :s
感谢 Sinistra 的回答。干净简单。
你能解释一下为什么在图片上使用vertical-align会影响文字吗？不明白这个
它会影响图像，使其垂直居中于线条，但它没有空间向上，因此将文本拉下。这仅适用于内联元素。您不能垂直对齐任何块显示元素（例如：div）。这就是为什么您需要删除 float: left 或使用第二种解决方案的原因。
@SeanHJenkins - 如果还没有，这可能是一个很好的问题（粗略看看，我什么也没看到）。

【解决方案2】：

你可以这样做

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

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

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

或者，您也可以这样做，而无需使用 span

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

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

【讨论】：

这有点小题大做，你不觉得吗？
真@JaredFarrish。但是黑客是允许的;-)
理论上，vertical-align: bottom 应该可以工作，对吧？
@JaredFarrish，我做了第二个没有span 的例子。往上看。 vertical-align:middle 在元素设置为 display:table-cell 时有效
非常感谢杰森的回答。