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

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


两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 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;




  • 13
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值