css 横线中间添加文字

最新推荐文章于 2021-06-21 17:07:28 发布

weixin_33922672

最新推荐文章于 2021-06-21 17:07:28 发布

阅读量908

点赞数 1

原文链接：http://www.cnblogs.com/zyjzz/p/6561816.html

版权

demoline01、02选一个用足够了

    <style>

.demo_line_01 {
    width: 200px;/*这指的是文字的宽度*/
    padding: 0 20px 0;
    margin: 20px auto;
    line-height: 1px;
    border-left: 200px solid #ddd;
    border-right: 200px solid #ddd;
    text-align: center;
  }

 .demo_line_02 {
    width:100%;/*这指的是整个行的宽度*/

    margin:0 auto;
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.demo_line_02 span {
    position: relative;
    top: -10px;
    background: #666;/*背景可改为白色*/
padding: 0 20px;
 }
</style>
</head>
<body>
  <div class="demo_line_01">分割线 </div>
  <div class="demo_line_02"><span>分割线</span></div>
</body>

转载于:https://www.cnblogs.com/zyjzz/p/6561816.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33922672

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 横线中间添加文字

demoline01、02选一个用足够了 <style>.demo_line_01 { width: 200px;/*这指的是文字的宽度*/ padding: 0 20px 0; margin: 20px auto; line-height: 1px; border-left: 200px solid #ddd; border...
复制链接

扫一扫