html单行文本垂直居中

单行文本垂直居中,在于使用line-height

若是line-height = height  可以实现垂直居中

若是line-height < height   文字偏上

若是line-height > height   文本篇下

实验案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航栏-行内块元素</title>
        <style>
        .a1{
            display: inline-block;
            width: 200px;
            height: 40px;
            background-color: #C0C0C0;
            text-align: center;
            text-decoration: none; 
            line-height: 40px;    
        }
        
        .a2{
            display: inline-block;
            width: 200px;
            height: 40px;
            background-color: #C0C0C0;
            text-align: center;
            text-decoration: none; 
            line-height: 50px;    
        }
        
        .a3{
            display: inline-block;
            width: 200px;
            height: 40px;
            background-color: #C0C0C0;
            text-align: center;
            text-decoration: none; 
            line-height: 30px;    
        }
    </style>
    </head>
    <body>
        <a href="#" class="a1">文本居中</a>
        <br /><br />
        <a href="#" class="a2">文本偏下</a>
        <br /><br />
        <a href="#" class="a3">文本偏上</a>
    </body>
</html>

效果图:

html单行文本垂直居中