css 横线中间添加文字
<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 横线中间添加文字的更多相关文章
- 用css实现在横线中间插入文字
在一些登录或者注册界面中常常可看到,一个大框框上面的横线中有插入文字,大概示意图如下: 这种现象其实是相对位置作用的结果,可以通过相对定位,是某元素恰好出现在div的边框上. position: re ...
- three.js添加文字
添加文字需要用到fontLoader,测试貌似只能异步.在success中回调. 对于中文字体,需要将ttf格式转换为json格式或者是js格式之后才能使用,不过一般转换之后的文件比较大.建议使用Fo ...
- css+div如何解决文字溢出
看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...
- css超出一行添加省略号属性:text-overflow和white-space
通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 不同CSS布局实现与文字鼠标选择的可用性——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的 ...
- CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...
- css伪类实现文字两侧划线效果
css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...
- C#使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9
视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...
随机推荐
- 不懂Git,别说自己是程序猿–20分钟git快速上手(转)
在Git如日中天的今天,不懂git都不好意思跟人说自己是程序猿.你是不是早就跃跃欲试了,只是苦于没有借口(契机). 好吧,机会就在今天. 给我20分钟,是的,只要20分钟, 让你快速用上git. 我们 ...
- Lintcode---区间求和 I
给定一个整数数组(下标由 0 到 n-1,其中 n 表示数组的规模),以及一个查询列表.每一个查询列表有两个整数 [start, end] . 对于每个查询,计算出数组中从下标 start 到 end ...
- mysql数据库中不能插入0000-00-00 00:00:00日期数据(报错Invalid datetime format: 1292 Incorrect datetime value: '0000-00-00 00:00:00')
报错信息 SQLSTATE[22007]: Invalid datetime format: 1292 Incorrect datetime value: '0000-00-00 00:00:00' ...
- Sublime Text的列模式
Sublime Text的列模式如何操作? 听语音 | 浏览:6551 | 更新:2014-12-09 13:27 | 标签:软件 Sublime Text的列模式如何操作?各个系统不一样,请跟进系统 ...
- Windows7 64位安装最新版本号MySQLserver
Windows7 64位安装最新版本号MySQLserver 最近,一直在研究MySQL数据库.常常改动配置文件.导致MySQL数据库无法使用.不得不重复重装MySQL数据库.下面是在Windows7 ...
- 安装yii2高级应用模板
composer global require "fxp/composer-asset-plugin:1.0.0" composer create-project --prefer ...
- 常用的几个linux命令
linux 命令众多,特别是每个命令后面的option更是很多,如果不经常使用,就容易忘记.下面是一些常用的命令和参数.其他不常用的,可以用help去现查现用. 1. 最常用的命令列表 下面列出几个在 ...
- try...except...后中断程序继续运行
今天遇到一个问题,本来是以前已经了解过的,但是忘了,现在又想起来了,还是记一下 try...except...当except抓到异常后程序会继续运行 但是个人感觉抓到异常后都是终止程序的吧...可能也 ...
- RandomUser 网站介绍
RandomUser 网站介绍 tools api 介绍 使用 结果 API 错误 请求多个用户 指定性别 密码 种子 格式 使用早期版本 国家 页码 包含/不包含字段 杂项 结束语 介绍 在 201 ...
- springBoot文档地址
文档: https://www.gitbook.com/book/qbgbook/spring-boot-reference-guide-zh/details 配置: http://docs.spri ...