小編給大家分享一下css如何實(shí)現(xiàn)中間文字兩邊橫線效果 ，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對(duì)外擴(kuò)展宣傳的重要窗口，一個(gè)合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺(tái)，成都創(chuàng)新互聯(lián)面向各種領(lǐng)域：成都宴會(huì)酒店設(shè)計(jì)等網(wǎng)站設(shè)計(jì)、營(yíng)銷型網(wǎng)站解決方案、網(wǎng)站設(shè)計(jì)等建站排名服務(wù)。

1. vertical-align屬性實(shí)現(xiàn)效果：

vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式。

該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。允許指定負(fù)長(zhǎng)度值和百分比值。

<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;  
　　//看到網(wǎng)上有把.text設(shè)置為vertical-align:-5px的，試了一下感覺和.header設(shè)置的line-height有沖突,效果不太合適。所以將vertical-align設(shè)置到.line上了
}
</style>

2. css偽類實(shí)現(xiàn)效果：

<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>

以上是“css如何實(shí)現(xiàn)中間文字兩邊橫線效果 ”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：css如何實(shí)現(xiàn)中間文字兩邊橫線效果-創(chuàng)新互聯(lián)
本文地址：http://jinyejixie.com/article28/eiojp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、域名注冊(cè)、App設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)