css實現中間文字,兩邊橫線效果
阿新 • • 發佈:2019-10-06
vertical-align 屬性設定元素的垂直對齊方式。
該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。
<div class="header"> <span class="line"></span> <span class="text">中間文字,兩邊橫線</span> <span class="line"></span> </div> <style> .header { width:400px; height:36px; line-height:36px; border:1px solid green; text-align:center; } .line { display:inline-block; width:100px; border-top:1px solid #cccccc; vertical-align:5px;
//看到網上有把.text設定為vertical-align:-5px的,試了一下感覺和.header設定的line-height有衝突,效果不太合適。所以將vertical-align設定到.line上了 } </style>
2. css偽類實現效果:
<div class="header">
<div>中間文字,兩邊橫線</div> </div>
<style> .header { width:400px; height:36px; line-height: 36px; text-align:center; border:1px solid green; position:relative; }.header div:before,.header div:after { position:absolute; background:#ccc; content:""; height:1px; top:50%; width:100px; } .header div:before{left:10px;} .header div:after{right:10px;} </style>
更多專業前端知識,請上 【猿204