关于网页布局中标题文字压线居中的安全方法

最新推荐文章于 2021-08-12 22:49:59 发布

ouyangye831

最新推荐文章于 2021-08-12 22:49:59 发布

阅读量1.2k

点赞数 1

分类专栏： css 文章标签：文字压线安全页面布局

本文链接：https://blog.csdn.net/ouyangye831/article/details/53375372

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如图所示，文字压线居中显示

html代码：

<div class="share-title">
    <span class="share-title__line"></span>
    <span class="share-title__text">分享</span>
 </div>

css代码：

.share-title{
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    position: relative;
}
.share-title__line{
    position: absolute;
    top: 50%;
    left:0;
    right:0;
    height: 1px;
    background: #bce0ff;
}
.share-title__text{
    font-size: 18px;
    color: #9bd0ff;
    position: relative;
    padding: 0 20px;
    background: #fff;
}

如果两侧有带修饰符，只需在

<div class="share-title">
    <span class="share-title__line"></span>
    <span class="part-title__text">
        <span class="part-title__line-dot left-dot"></span>
        <span>分享</span>
        <span class="part-title__line-dot right-dot"></span>
    </span>
</span>

CSS代码：

.part-title__line-dot{
    position: absolute;
    top: 20px;
    background: url("../img/line-dot.png") no-repeat;
    height: 7px;
    width: 8px;
    z-index: 2;
}
.left-dot{
    left: 0;
}
.right-dot{
    right: 0;
}

效果如图：