中間標題兩邊橫線(xiàn)css寫(xiě)法
發(fā)表日期：2017-10-12 文章編輯：admin 瀏覽次數：2384
在宜興做網(wǎng)站設計項目中，我們的程序人員在寫(xiě)css時(shí)會(huì )經(jīng)常遇到過(guò)中間文字，兩邊橫線(xiàn)的布局，這種布局有多種方法寫(xiě)法，以下方法是我經(jīng)常采用的寫(xiě)法:
第一種：兩邊橫線(xiàn)作為圖片背景寫(xiě)法，這種方法不靈活，會(huì )有局限性。
第二種：純css寫(xiě)法，方便快捷，不受局限性，博路網(wǎng)絡(luò )推薦此寫(xiě)法，以下就詳細介紹此方法：
代碼效果如下圖：
兩邊橫線(xiàn)我們可以使用標簽的上邊框border-top: 1px solid #ccc或者下邊框border-bottom: 1px solid #ccc，然后對中間的文字使用 vertical-align 屬性來(lái)控制。
ABOUT US
css:
.about_title{ height: 30px; line-height: 30px; text-align: center; }
.about_title .line {display: inline-block; width: 66px; border-top: 1px solid #ccc ; }
.about_title .ttten_about{color: #CCC;vertical-align: middle;vertical-align:-4px; padding-left:5px; padding-right:5px; font-size:18px}
在css樣式中使用 vertical-align: middle，然后就發(fā)現橫線(xiàn)沒(méi)有完全在文字的中間,查找 vertical-align 的屬性就會(huì )發(fā)現有length 和 % 兩個(gè)屬性,然后嘗試使用 % 看看能不能讓橫線(xiàn)在文字的中間，通過(guò)調整 css 樣式，加上:
vertical-align: -8%;
發(fā)現橫線(xiàn)在文字的中間，那么 length 長(cháng)度屬性是否也可以呢？試一試發(fā)現也是可以的，或者加上:
vertical-align: -4px;如上面樣式寫(xiě)法:.about_title .ttten_about{color: #CCC;vertical-align: middle;vertical-align:-4px; padding-left:5px; padding-right:5px; font-size:18px}
標簽： 兩邊橫線(xiàn)css
如沒(méi)特殊注明，文章均為宜興博路網(wǎng)絡(luò )原創(chuàng ),轉載請注明來(lái)自http://m.wyominglasercutting.com/news/changjianwenti/2017/1013/128.html