css 同一行内的所有文案,图标垂直居中对齐

居中要点

1.该行内的所有元素

      display:inline-block;
      line-height: xx;
      vertical-align: middle;

2.例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>好哇好哇</title>
        <style>
            div{
                width: 100%;
                height: 40px;
                font-size: 14px;
                border: 1px solid #f2f2f2;
            }
            span{
                display: inline-block;
                margin-right: 16px;
                line-height: 38px;
                vertical-align: middle;
            }
            img{
                width: 10px;
                height:10px;
                line-height: 38px;
                vertical-align: middle;
            }
            b{
                line-height: 38px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div>
            <span>首页</span>
            <span>照片</span>
            <span>其他</span>
            <span>
                <img src="./bg_li.gif"/>
                <span>联系我</span>
                <b>嘻嘻嘻</b>
            </span>
        </div>
    </body>
</html>
posted @ 2020-11-07 16:30  胡姐姐  阅读(252)  评论(0编辑  收藏  举报