定位添加了CSS伪内容的图像

Question

我试图在我的表中的默认用户"头像"编码。但是文本的位置就变得很奇怪了，

我使用的代码:

table tr td:first-child {
    text-align:center;
    vertical-align:middle; /* or top, neither works */
    width:300px;
    overflow:hidden;
}
table tr td:first-child:before {
    content:url(images/avatar.png);  /* further attributes here? */
} 

TL;DR:当我添加图像时，我的文本会垂直移位。

[IMG] username

实时演示:http://jsfiddle.net/r4ys1yma/2/

Answer 1

好的，尝试设置垂直对齐并更改显示属性。

table th tr td:first-child:before {
    content:url(images/avatar.png);
    vertical-align: middle;
    display: inline-block;
}

Answer 2

你在哪里找这样的东西?

<article class="avatar">
<img src="http://static.artfire.com/uploads/products/2015/03/05/89/11407842/large/0002_angry_cat_pillow_design_518fdabd.jpg">
</article>
<div class="avatardetails">
    <p>Name: Mike smith</p>
    <p>Posts: 120</p>
    <p>Site: Something.com</p>
</div>

http://jsfiddle.net/br30Lyed/