css 兩邊是線，中間文字的多種實現方法

<div class="soild_text_one">
  <fieldset>
    <legend>歷史活動一</legend>
  </fieldset>
</div> 

<div class="soild_text_two">
  <hr/><span>歷史活動二</span><hr/>
</div>

<div class="soild_text_three">
   歷史活動三
</div>

.soild_text_one{
  width:500px;
  margin:0 auto;
  fieldset{
        height: 500px;
        border-left: none;
        border-right: none;
        border-bottom: none;
        color: #009688;
        border-color: #defffc;
        height:20px;
        legend{
            text-align: center;
            padding: 0 10px;
            font-size: 14px;
        }
    }
}

.soild_text_two{
  text-align:center;
  width:500px;
  margin:0 auto;
  height:20px;
  font-size: 14px;
  color: #4caf50;
  hr{
    width:200px;
    display:inline-block;
    vertical-align:middle;
    border-color: #e4ffe6;
  }
  span{
    padding: 0 10px;
  }
}

.soild_text_three{
  position:relative;
  text-align:center;
  width:500px;
  margin:20px auto;
  height:20px;
  font-size: 14px;
  color:#ff9800;
  &::before,&::after{
    content:"";
    position:absolute;
    top:50%;
    border:solid 1px #fbdfb6;
    width:40%;
  }
  &::before{
    left:0;
  }
  &::after{
    right:0;
  }
}

可以點擊看具體展示效果：試一試

效果圖如下