如何在水平线中间添加文字
今天在做添加水平线遇到了一个问题,水平线中间的文字位置不在正中间,百度实践后得到解决。
效果如下:
代码如下:
- body里面的设置很简单:
<div class="box1">
<span class="line"></span>
<span class="text">大家正在关注</span>
<span class="line"></span>
</div>
- 外面box1的css样式
.box1{
height:40px;
display:flex;
justify-content:space-between;
align-items:center;
background-color:#ffffff;
}
- 水平线的css样式
.line{
height:2px;
background-color:#e7e7e4;
flex-grow:1;
}
- 文字的设置
.text{
top:0;
color:#e8e8e3;
transform:translateY(-10PX);
}
transform:translateY:在Y轴上下移动