美文网首页
html css分割线添加文字

html css分割线添加文字

作者: 编程知识圈 | 来源:发表于2021-01-07 15:18 被阅读0次

    如何实现下图实线插入一段文字呢?

    分割线添加文字

    主要思想是:

    1. 实现是 div 的 content 部分,实线的颜色就是 background-color

     2. 文字部分可以作为父div 内嵌一个div ,然后再通过 transform: translateY(-50%);  移动Y轴上的位置

    3. 使用position: relative(父)和 position: absolute(子)来进行定位,移动文字位置

    实现代码如下:

    // html

    <div class="divider">

            <div class="divider-text">这是一段文字或者图标</div>

    </div>

    // css

    .divider {

            width: 100%;

             height: 1px; 

            position: relative;

            background-color: #fa83345c;

    }

    .divider-text{

            position: absolute;  

            background-color: #FFF; 

            padding: 0 20px;

            color: #303133;  

            left: 20px;

            transform: translateY(-50%); 

    }

    相关文章

      网友评论

          本文标题:html css分割线添加文字

          本文链接:https://www.haomeiwen.com/subject/gxezoktx.html