在項目中遇到過中間文字，兩邊橫線的布局，如下圖：

兩邊橫線我們可以使用標簽的上邊框或者下邊框，然后對中間的文字使用 vertical-align 屬性來控制。

<div class="order">  
   <span style="white-space:pre">   </span><span class="line"></span>  
   <span style="white-space:pre">   </span><span class="txt">產品清單</span>  
   <span style="white-space:pre">   </span><span class="line"></span>  
</div>

css

.order {  
   height: 60px;  
   line-height: 60px;  
   text-align: center;  
}  
 .order .line {  
   display: inline-block;  
   width: 150px;  
   border-top: 1px solid #ccc ;  
}  
.order .txt {  
   color: #686868;  
   vertical-align: middle;  
}

在css樣式中使用 vertical-align: middle，然后就發現跟UI圖有一點點區別，橫線沒有完全在文字的中間

查找 vertical-align 的屬性就會發現有length 和 % 兩個屬性

然后嘗試使用 % 看看能不能讓橫線在文字的中間，通過調整 css 樣式

<span style="white-space:pre">  </span><span style="font-family: Arial, Helvetica, sans-serif;">vertical-align: -8%;</span>

發現橫線在文字的中間，那么 length 長度屬性是否也可以呢？試一試發現也是可以的