在一些登录或者注册界面中常常可看到,一个大框框上面的横线中有插入文字,大概示意图如下:

这种现象其实是相对位置作用的结果,可以通过相对定位,是某元素恰好出现在div的边框上。

position: relative;

下面举例说明:

首先创建html元素

<div>
<span class="title">注册</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
</div>

然后写css样式:

div {
width: 200px;
height: 100px;
padding: 5px 30px;
margin: 50px;
border: 4px solid #e14d43;
} div span.title {
display: block;
width: 40px;
position: relative;
top: -15px;
text-align: center;
background: #ededef;
font-size: 16px;
font-weight: bold; }

显示效果见上面示意图。

用css实现在横线中间插入文字的更多相关文章

  1. css实现中间横线俩边文字效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  3. mp4视频中插入文字

    最近接到一个需求,需要往mp4中动态插入文字,并且mp4中的乌云能在文字上有飘动的效果,一开始想用canvas,但是由于本人经验不足,没什么思路,看到css3有一个属性:mix-blend-mode, ...

  4. css划隔横线的两种方法

    css划隔横线的两种方法  方法一:用DIV,代码如下:(推荐此方法)    <div style="width:800px;height:1px;margin:0px auto;pa ...

  5. C#操作word模板插入文字、图片及表格详细步骤

    c#操作word模板插入文字.图片及表格 1.建立word模板文件 person.dot用书签 标示相关字段的填充位置 2.建立web应用程序 加入Microsoft.Office.Interop.W ...

  6. textarea 在光标处插入文字

    效果演示 // 欢迎访问cssfirefly.cnblogs.com html: <textarea id="text" style="width:500px;he ...

  7. Android(java)学习笔记139:在TextView组件中利用Html插入文字或图片

    首先我们看看代码: 1.activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...

  8. JQ在光标处插入文字

    内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":fun ...

  9. js设置光标插入文字和HTML

    原文链接:js设置光标插入文字和HTML 在一个textarea的某个光标位置插入文字或者在某个编辑器中插入图片html内容,我最近经常和这些打交道,但总是一团模糊,今天整理一下关于如何插入文字,设置 ...

随机推荐

  1. noip第9课作业

    1.    打印乘法表 [问题描述] 用for循环实现输出1至9的乘法表 [样例输出] 1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 1*4=4 2*4=8 3*4=12 4 ...

  2. Java中JNI的使用详解第三篇:JNIEnv类型中方法的使用

    转自: http://blog.csdn.net/jiangwei0910410003/article/details/17466369 上一篇说道JNIEnv中的方法的用法,这一篇我们就来通过例子来 ...

  3. CreateDialog()与CreateDialogIndrect()

    CreateDialog() 概述 函数功能:CreateDialog宏从一个对话框模板资源创建一个无模式的对话框,CreateDiaog宏使用CreateDialogParam函数. 函数原型:HW ...

  4. Codeforces801D Volatile Kite 2017-04-19 00:30 122人阅读 评论(0) 收藏

    D. Volatile Kite time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  5. ZOJ2481 Unique Ascending Array 2017-04-18 23:08 33人阅读 评论(0) 收藏

    Unique Ascending Array Time Limit: 2 Seconds      Memory Limit: 65536 KB Given an array of integers ...

  6. express4.X 笔记

    express是node的web框架,更新频繁,3.X到4.X有了很大的改变.网上的例子,各种版本的都有,为了以后方便,现在重新认真看一遍4.X的API,统一以后的使用方法.在J2EE上落后了,在ex ...

  7. 自适应XAML布局经验总结 (四)区域布局设计模式

    本系列对实际项目中的XAML布局场景进行总结,给出了较优化的自适应布局解决方案,希望对大家有所帮助. 下面介绍区域布局设计模式. 7. 头尾模式 页面有时分为顶部栏,中间内容和底部栏三部分.这时可以使 ...

  8. [Openwrt 项目开发笔记]:Openwrt平台搭建(一)补遗

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 昨晚上熬夜写了[Openwrt项目开发笔记]:O ...

  9. AbpZero后台模块化(1)

    AbpZero的精髓就在于多租户模块化加载,如果不做到这两种的话,就没必要使用这个框架. 1.首先,我们得新建一个类库,用于存放我们写的业务代码.       在类库下分别建立三个类文件:TestAp ...

  10. 关于文件的INode与Java中的文件操作接口

    本文由作者周梁伟授权网易云社区发布. 近日做的项目中涉及到多进程共同读写多个文件的问题,文件名和最后修改时间都是可能会被频繁修改的,因而识别文件的唯一性会产生相当的麻烦,于是专门再学习了一下文件系统对 ...