css實現中間文字兩邊橫線效果

2024-07-11 08:59:33

字體：大中小

來源：轉載

供稿：網友

1. vertical-align屬性實現效果：

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>