這篇文章主要介紹了css怎么實(shí)現(xiàn)中間文字,兩邊橫線的標(biāo)題效果,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比芮城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式芮城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋芮城地區(qū)。費(fèi)用合理售后完善,10多年實(shí)體公司更值得信賴。
1.vertical-align屬性
vertical-align屬性設(shè)置元素的垂直對(duì)齊方式。
該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。允許指定負(fù)長(zhǎng)度值和百分比值。
.header
{
width:400px;
height:36px;
line-height:36px;
border:1pxsolidgreen;
text-align:center;
}
.line
{
display:inline-block;
width:100px;
border-top:1pxsolid#cccccc;
vertical-align:5px;
//看到網(wǎng)上有把.text設(shè)置為vertical-align:-5px的,試了一下感覺和.header設(shè)置的line-height有沖突,效果不太合適。所以將vertical-align設(shè)置到.line上了
}
2.css偽類實(shí)現(xiàn)效果:
.header
{
width:400px;
height:36px;
line-height:36px;
text-align:center;
border:1pxsolidgreen;
position:relative;
}
.headerdiv:before,.headerdiv:after
{
position:absolute;
background:#ccc;
content:"";
height:1px;
top:50%;
width:100px;
}
.headerdiv:before{left:10px;}
.headerdiv:after{right:10px;}
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“css怎么實(shí)現(xiàn)中間文字,兩邊橫線的標(biāo)題效果”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!