News Contents
信息中心

css样式,中间文字,两边横线

发表日期:2019/4/11      浏览次数:


在项目中遇到过中间文字,两边横线的布局


两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制。


html



<div class="order">

    <span class="line"></span>

    <span class="txt">产品清单</span>

    <span class="line"></span>

</div>

css


 .order {

   height: 60px;

   line-height: 60px;

   text-align: center;

}

 .order .line {

   display: inline-block;

   width: 150px;

   border-top: 1px solid #ccc ;

}

.order .txt {

   color: #686868;

   vertical-align: middle;

}

在css样式中使用 vertical-align: middle,然后就发现跟UI图有一点点区别,横线没有完全在文字的中间 


查找 vertical-align 的属性就会发现有length 和 % 两个属性




然后尝试使用 % 看看能不能让横线在文字的中间,通过调整 css 样式



vertical-align: -8%;

发现横线在文字的中间,那么 length 长度属性是否也可以呢?试一试发现也是可以的


vertical-align: -4px;

 

盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
  下一篇:没有了!
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!