CSS学习之做个导航栏（垂直居中） 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>做个导航栏</title>
        <style>
         a{
             width: 100px;
             height: 40px;
             background-color: #FFD700;
             text-decoration: none;
             display:inline-block;
             text-align: center;
             /* 垂直居中需要用到行高
             行高=上距离+文本高度+下距离 */
             line-height: 40px;
         }
         a:hover{
             color:sandybrown;
            background-color: aqua;
         }
        </style>
    </head>
    <body>
        <a href="#">体育</a>
        <a href="#">娱乐</a>
        <a href="#">汽车</a>
    </body>
</html>

 

posted @ 2021-07-09 11:00  王彬-效率开发  阅读(306)  评论(0)  编辑  收藏  举报