垂直文本在同一行排列的div

Question

我有一個文本和一個div彼此相鄰（它說：「BitHumor」和「檢查」符號），但它們不是相互對齊（見圖片）

這裏是我的HTML和CSS代碼：

<font face='HelveticaNeue-bold' color='#4671A5' font size='6' style='position:absolute;z-index:500;width:100%;top:120px;vertical-align:middle;'> 
<center>" . $row["username"]. "&nbsp;<div class='" . $row["status"]. "'></div> 
    <style> 
    .official { 
    content: url('http://bithumor.co/1234567890.png'); 
    width: 28px; 
    height: 28px; 
     display: inline; 
    z-index:999999; 
    position: absolute; 
    vertical-align:middle; 
    } 
    </style> 

如何使文字（ 「BitHumor」）和DIV（圖片 - 有標記）垂直對齊？

Answer 1

這裏有兩種選擇：

1. 取出絕對定位。通過從對勾類（.official）去除position: absolute，你就可以使用vertical-align。

2. 對準使用margin。此加入勾選類：.official { margin-top: 5px; }