在项目中遇到过中间文字,两边横线的布局,如下图:
两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制。
产品清单
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 长度属性是否也可以呢?试一试发现也是可以的