如何在水平线中间添加文字

如何在水平线中间添加文字

今天在做添加水平线遇到了一个问题，水平线中间的文字位置不在正中间，百度实践后得到解决。
效果如下：

代码如下：

• body里面的设置很简单:

<div class="box1">
         <span class="line"></span>
		 <span class="text">大家正在关注</span>
		 <span class="line"></span>
	 </div>

• 外面box1的css样式

 .box1{
    	     height:40px;
    		 display:flex;
             justify-content:space-between;
    		 align-items:center;
    		 background-color:#ffffff;
    	 }

• 水平线的css样式

.line{
    	     height:2px;
    		 background-color:#e7e7e4;
    		 flex-grow:1;
    	 }

• 文字的设置

.text{
        	     top:0;
        		 color:#e8e8e3;
                 transform:translateY(-10PX);
        	 }

transform:translateY：在Y轴上下移动