如何布局两边横线,中间文字

  <div class="task" >
      <div style="margin-top:15px;">
        <span class="line"></span>
        <span>新手任务</span>
        <span class="line"></span>
      </div>
    </div>

css

 .task {
    overflow: hidden;
    text-align: center;
    height: 300px;
    background-color: #ffffffff;
    margin-top: 10px;
    .line{
         display:inline-block;
    width:10px;
    border-top:2px solid #FF625DFF;
    vertical-align:5px;  
    }
  }

 

转载于:https://my.oschina.net/u/4004801/blog/3033764