图标在横线的中间！

Posted 2020-10-20 wuli-youhouli

最终的效果：

1 <div class="line-icon">
2     <p></p>
3     <span>标题</span>
4 </div>

 1 <style>
 2     .line-icon{
 3         position: relative;
 4         height:50px;
 5         width:100%;
 6         border:1px solid black;
 7     }
 8     .line-icon p,.line-icon span{
 9         position:absolute;
10         top:50%;
11         left:50%;
12         transform: translate(-50%,-50%);
13         background:red;
14     }
15     .line-icon p{
16         top:10px;
17         height:1px;
18         width:50%;
19         z-index:-1;
20     }
21     .line-icon span{
22         height:30px;
23         width:50px;
24         line-height:30px;
25         text-align:center;
26         z-index: 1;
27         background: white;
28     }
29 </style>

这种效果常用于文档的的标题和分类上。日常写项目的时候也很常用。