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