css-实现文字两侧加居中横线的简单方法

利用flex布局实现。

1、html代码：

<div class="lines">
 <span class="line"></span>
 <span id="font">Friday</span>
 <span class="line"></span>
</div>

2、css样式：

.lines {
  text-align: center;
  line-height: 30px;
  display: flex;
}

.lines .line {
  width: 1300px;/*要先给出宽度*/
  border-top: 2px dashed #7965ef;
  margin-top: 15px;/*line-height的一半*/
}

.lines #font {
  margin: auto 10px;
}

说明：使用flex布局后，三个span元素默认成行排列；
再调整间距就行。
.lines #font { margin: auto 10px; } 调整文字与横线的间距。

效果图：