css实现文字两边的分割线

最新推荐文章于 2023-12-14 10:35:03 发布

easy868

最新推荐文章于 2023-12-14 10:35:03 发布

阅读量7.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_36376948/article/details/68483393

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用CSS实现的自适应宽度分割线，并在分割线上方居中显示多行文字的方法。该方案适用于网页布局设计，能够使分割线随容器宽度变化而自动调整长度。

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

<div class="xian">
    <span class="txt">分割线文字 <br>English text</span>
</div>

.xian {
       height: 1px; 
       margin-top: 40px;
       text-align: center; 
       border-top: 1px solid #e2e2e2;
}
.txt{ 
     position: relative;
     top:-18px;
     background: #fff;
     display: inline-block;
}