您的位置:主页 > 新闻资讯 > 常见问题 >
中间标题两边横线css写法
发表日期:2017-10-13 02:58   文章编辑:flhfelygo    浏览次数:
 

在宜兴做网站设计项目中,我们的程序人员在写css时会经常遇到过中间文字,两边横线的布局,这种布局有多种方法写法,以下方法是我经常采用的写法:
第一种:两边横线作为图片背景写法,这种方法不灵活,会有局限性。
第二种:纯css写法,方便快捷,不受局限性,博路网络推荐此写法,以下就详细介绍此方法:

代码效果如下图:


两边横线我们可以使用标签的上边框border-top: 1px solid #ccc或者下边框border-bottom: 1px solid #ccc,然后对中间的文字使用 vertical-align 属性来控制。

html:

<div class="about_title">
<span style="white-space:pre"> </span><span class="line"></span>
<span style="white-space:pre"> </span><span class="about_title_en">ABOUT US</span>
<span style="white-space:pre"> </span><span class="line"></span> </div>
</div>

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}

 


 

标签:    
如没特殊注明,文章均为博路网络原创,转载请注明来自https://www.boroad.net/news/changjianwenti/2017/1013/128.html