Flex布局結合border:left/right; 來設置文字中間分割線
阿新 • • 發佈：2017-06-22
設置高度 com none eight 垂直 有著 log 技術分享 border
今天設計給的稿件的分割線不是平常常見的那種，還給了兩條垂直的線。
比如像這樣：
看到這張圖，第一反應用兩條hr，再設置hr的border-left/right。然而這並不能實現這樣的效果。
當你給hr設置高度的時候，如果不設置border:none，hr看上去變成了一個有著灰色邊框的盒子。比如像這樣：
hr{ height: 15px; /*border:none;*/ /*border-top:1px solid red;*/ /*border-right: 1px solid red;*/ }
效果如圖：
註釋部分取消註釋後：
折騰了夠久了。期間還試驗了文字前面：before ：after寫法~然而依舊折騰得夠嗆。
突然覺得，我何不弄簡單點。
比如像這樣：
<style> .box{ width: 600px; display: flex; align-items: center; margin-top: 20px; } .div1, .div3{ flex:1.4; border-top: 1px solid red; } .div2{ flex:1; text-align: center; border-left: 1px solid red; border-right: 1px solid red; font-size:36px; line-height: 16px; padding: 0 20px; } </style> </head><body> <div class="box"> <div class="div1"></div> <div class="div2">我的文字</div> <div class="div3"></div> </div> </body>
用 Flex 大容器包裹三個盒子，屬性設置 align-items: center。使得3個盒子垂直居中對齊。
再給文字設置border-left/right。
註意，這裏第二個div文字部分不設置height，而是用設置line-height來達到縮短 border-left/right的高度。
得到的就是文章開頭圖片那樣的效果。
另外一個今天折騰了一小會的是關於 line-gradient。下次再說。
Flex布局結合border:left/right; 來設置文字中間分割線