如何将图像作为伪元素对齐？

Question

<a class='flink'href='mc/index.php'>
<div class='cap_01'>323232323232</div>
<div class='cap_02'>52525252525252</div>
</a>

css

.cap_01:before{
    content: url('https://www.gravatar.com/avatar/c191bbf22d56f27dd1bc0128ea3b2844?s=24&d=identicon&r=PG&f=1');
    margin-right:9px;
    vertical-align:middle;

}
.cap_02{
    margin:5px 0 0 29px;
}

如何将cap_01:before中的图片调整为文字323...的垂直中间位置？

JSFIDDLE是here

Answer 1

将display: inline-block;添加到伪元素。