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 ...
随机推荐
- min-height clear
在编辑页面时,总是会遇到min-height的设置 但是设置min-height后下面的div总是 跟随min-height的高度有些漂浮,如果不想让下面的div没有漂浮的效果 可以用到样式 clea ...
- 【转】C#播放H264裸码流
原文地址:https://www.cnblogs.com/cangyue080180/p/5873351.html 要播放H264裸码流,可以分拆为以下三个工作: 1.解码H264裸码流获取YUV数据 ...
- HTTP协议，详解
整合网上各种资料,原创,不懂可以加 QQ:3111901846 一般学习一样新的知识,你首先要问问自己这三个问题,如果学完以后,你能回答出来这几个问题,证明你还是不错的 1.什么是HTTP协议?2.H ...
- ASP.NET 之XML：要插入的节点出自不同的文档上下文
异常详细信息: System.ArgumentException: 要插入的节点出自不同的文档上下文. 产生状况:现在有两个xml文件,我想把这两个xml合并,在给xml节点插入一个子节点时出 ...
- 关于wxpy，使用Python玩转微信的问题
在github上下载了,安装了之后在idle上运行,好像是说Python不能上网.新手求助.现在问题已经解决,是ssl 证书的问题,不能用最新的 复制内容到剪贴板 代码: sudo pip unins ...
- Vue 中的生命周期和钩子函数
生命周期: beforeCreate:el 和 data 并未初始化 (此方法不常用) created:完成了 data 数据的初始化,el的初始化未完成.用来发送ajax beforeMount:( ...
- 自己定义进度条PictureProgressBar——从开发到开源公布全过程
自己定义进度条PictureProgressBar--从开发到开源公布全过程 出处: 炎之铠邮箱:yanzhikai_yjk@qq.com 本文原创.转载请注明本出处! 本项目JCenter地址:ht ...
- TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签
首先来看下实现的效果吧: 最近在项目中实现这个效果的时候.尽管自己磕磕绊绊的实现了,可是知识确实模模糊糊的,今天天气异常的冷,在加上这个知识不太熟练,实在是没有心情进行接下来的计划,干脆借着这个时间, ...
- Unity编辑器下获取动画的根运动状态并修改
我最初想直接修改.anim文件 但通过后来得到的信息,其实根运动状态储存在FBX.meta文件里,转出的.anim文件虽然也有根运动的信息但是算是塌陷过的,无法进行开关操作. 这是我针对有根运动.an ...
- 调试JDK1.8源码的方法
背景 在学习JDK源码的时候,免不了需要调试JDK的源码. 比如:想理解ConcurrentHashMap的put(K k, V v)方法,JDK自带的rt.jar文件是支持断点调试,但是却看不到变量 ...