Question

我正在尝试在我的表中使用默认用户“avatar”进行编码。但是文本的定位非常奇怪（跳了一下）。

我正在使用的代码：

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] 用户名

现场演示：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/

使用CSS伪内容

2 个答案: