css 横线中间添加文字

CSS分割线样式设计

最新推荐文章于 2024-10-18 17:20:30 发布

转载最新推荐文章于 2024-10-18 17:20:30 发布 · 982 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：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>