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>

css 横线中间添加文字的更多相关文章

  1. 用css实现在横线中间插入文字

    在一些登录或者注册界面中常常可看到,一个大框框上面的横线中有插入文字,大概示意图如下: 这种现象其实是相对位置作用的结果,可以通过相对定位,是某元素恰好出现在div的边框上. position: re ...

  2. three.js添加文字

    添加文字需要用到fontLoader,测试貌似只能异步.在success中回调. 对于中文字体,需要将ttf格式转换为json格式或者是js格式之后才能使用,不过一般转换之后的文件比较大.建议使用Fo ...

  3. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

  4. css超出一行添加省略号属性:text-overflow和white-space

    通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...

  5. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  6. 不同CSS布局实现与文字鼠标选择的可用性——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的 ...

  7. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  8. css伪类实现文字两侧划线效果

    css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...

  9. C#使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9

    视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...

随机推荐

  1. 【转】C#播放H264裸码流

    原文地址:https://www.cnblogs.com/cangyue080180/p/5873351.html 要播放H264裸码流,可以分拆为以下三个工作: 1.解码H264裸码流获取YUV数据 ...

  2. 基于DDD的.NET开发框架-DDD经典分层

    DDD核心思想是由业务问题来控制解决方案的形式从以数据库为中心过渡到领域模型为中心 下面这个图是我在<领域驱动设计与模式实战>书中拍下来的,他完全诠释DDD的经典分层. 程序代码中也是响应 ...

  3. iOS 9应用开发教程之ios9中实现button的响应

    iOS 9应用开发教程之ios9中实现button的响应 IOS9实现button的响应 button主要是实现用户交互的.即实现响应.button实现响应的方式能够依据加入button的不同分为两种 ...

  4. NOJ 1012 进制转换(十进制转换成随意进制)

    题目: 进制转换 时间限制(普通/Java) : 1000 MS/ 3000 MS          执行内存限制 : 65536 KByte总提交 : 1819            測试通过 : ...

  5. List与String的相互转换

    List转字符串,用逗号隔开 List<string> list = new List<string>(); list.Add("a"); list.Add ...

  6. unity, editable mesh

    一,需求 从fbx载入的模型是不可以在unity里编辑的. 我有一人特殊的需求就是想在unity里为mesh的各顶点K动画. 于是需要自己实现一个可编辑(其实只是顶点可以拖动)的mesh. 二,思路 ...

  7. Sublime Text 2 和 Verilog HDL

    Sublime Text 2 和 Verilog HDL Date  Fri 04 July 2014 Tags Sublime Text / Vivado Sublime Text 代码编辑器之于程 ...

  8. Android开发-状态栏着色原理和API版本号兼容处理

    介绍 先上实际效果图,有三个版本号请注意区分API版本号 API>=20 API=19 API<19 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZX ...

  9. TCP协议的三次握手和四次挥手过程

    TCP是一种面向连接(连接导向)的.可靠的基于字节流的传输层通信协议.TCP将用户数据打包成报文段,它发送后启动一个定时器,另一端收到的数据进行确认.对失序的数据重新排序.丢弃重复数据. 1.TCP/ ...

  10. python对象序列化之pickle

    本片文章主要是对pickle官网的阅读记录. The pickle module implements binary protocols for serializing and de-serializ ...