CSS 分隔线中间带文字分隔符

最新推荐文章于 2024-07-12 08:49:29 发布

jiaweimin123

最新推荐文章于 2024-07-12 08:49:29 发布

阅读量9.6k

点赞数 2

分类专栏： html css 文章标签： html css 分隔线

本文链接：https://blog.csdn.net/jiaweimin123/article/details/78174912

版权

html 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

HTML部分：

<div class="order">
        <span style="white-space:pre">   </span><span class="line"></span>
        <span style="white-space:pre">   </span><span class="txt">最近常用路线</span>
        <span style="white-space:pre">   </span><span class="line"></span>
    </div>

CSS部分：

.order {
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.order .line {
    display: inline-block;
    width: 35%;
    border-top: 3px solid #82B3D5;
}
.order .txt {
    color: #555;
    vertical-align: middle;
}
如下图所示：