vue中分割线的实现

最新推荐文章于 2024-07-18 10:37:05 发布

HGYYR

最新推荐文章于 2024-07-18 10:37:05 发布

阅读量1k

点赞数

文章标签： vue.js css 前端

本文链接：https://blog.csdn.net/hgyyr/article/details/132300393

版权

1.设置html格式

<div class="tableTitle"><span class="midText">分割线</span></div>

2.设置css样式

.tableTitle {
    position: relative;
    margin: 0 auto;
    width: 600px;
    height: 1px;
    background-color: #d4d4d4;
    text-align: center;
    font-size: 16px;
    color: rgba(101, 101, 101, 1);
  }
 .midText {
    position: absolute;
    left: 50%;
    background-color: #ffffff;
    padding: 0 15px;
    transform: translateX(-50%) translateY(-50%);
  }