中间标题两边横线css写法
发表日期：2017-10-12 18:58:12 文章编辑：admin 浏览次数：245
在宜兴做网站设计项目中，我们的程序人员在写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，然后就发现横线没有完全在文字的中间,查找 vertical-align 的属性就会发现有length 和 % 两个属性,然后尝试使用 % 看看能不能让横线在文字的中间，通过调整 css 样式，加上:
vertical-align: -8%;
发现横线在文字的中间，那么 length 长度属性是否也可以呢？试一试发现也是可以的，或者加上:
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
如没特殊注明，文章均为宜兴博路网络原创,转载请注明来自https://www.boroad.net/news/changjianwenti/2017/1013/128.html