请问关于行高和垂直居中的问题

<html>
    <head>
        <title>login</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scale=no/">
        
        <style type="text/css">
            html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
            .hd{
                height: 9.6%;
                line-height: 9.6%;
                background: rgb(255,173,1) url(images/spirit.png) no-repeat 0px 30px; 
                position: relative;
                text-align: center;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="hd">分类</div>
        <div></div>
    </body>
</html>

请问各位在这段代码中加完行高后分类两个字为何跑上边去了，还有把行高该成vertical-align: middle;后什么作用都没有啊？

如果你想设置文字垂直居中可以不设置 height，直接设置 line-height 或者 padding，而你说的 vertical-align 只能用在 inline-level and table-cell elements 上

【热门文章】