垂直對齊圖像和文字？

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/