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

最新推荐文章于 2025-06-12 16:31:02 发布

原创最新推荐文章于 2025-06-12 16:31:02 发布 · 9.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #分隔线

html 同时被 2 个专栏收录

26 篇文章

订阅专栏

css

21 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的简单布局案例，包括样式设置和元素排列等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}