css问题,这里如何让文本上对齐呢?

clipboard.png

clipboard.png
这是我的代码:
<!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>

阅读 10.9k
8 个回答

你要加上line-height,试试

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

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

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

line-height:32px
.tip{
    margin-bottom:-8px;
}

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

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

新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题