css问题，这里如何让文本上对齐呢？

这是我的代码：
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>字体测试</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        a {
            text-decoration: none;
        }
        
        body {
            padding-top: 20px;
        }
        
        .table {
            text-align: center;
            width: 560px;
            margin: 0 auto;
        }
        
        td {
            vertical-align: top;
            padding-top: 40px;
            padding-bottom: 20px;
        }
        
        span.tip {
            background-image: url(images/home.png);
            display: inline-block;
            width: 32px;
            height: 32px;
        }
    </style>
</head>

<body>
    <table class="table">
        <caption>
            <h3><b>人员信息统计<b></h3></caption>
        <tbody style="text-align:center">
            <tr>
                <td>张三</td>
                <td>12</td>
                <td>辽宁沈阳<span class="tip"></span></td>
            </tr>
            <tr>
                <td>王五</td>
                <td>22</td>
                <td>河北邯郸</td>
            </tr>
            <tr>
                <td>李六</td>
                <td>33</td>
                <td>海南海口</td>
            </tr>
            <tr>
                <td>刘四</td>
                <td>65</td>
                <td>广东广州</td>
            </tr>
            <tr>
                <td>丁七</td>
                <td>28</td>
                <td>河南郑州</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

.tip{
    margin-bottom:-8px;
}

加上vertical-align:middle;
还是不可以的话，用绝对定位试一下。

你如果想那行字与右边图标上对齐，就给右边图标加vertical-align: top，如果要居中对齐就加middle，记住是给右边图标加。

你给文字加上line-height给加上行高不就可以上下居中了?

这个图标其实可以用字体图标的，不用图片

背景图片的高度比行高还要高，而字体没有居中导致的问题。
可以设置td的行高与背景图片的高度相等：

line-height：32px

给td添加行高line-height：32px就OK

你要加上line-height，试试

【热门文章】