1. vertical-align属性实现效果:

vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

<div class="header">
<span class="line"></span>
<span class="text">中间文字,两边横线</span>
<span class="line"></span>
</div> <style>
.header
{
width:400px;
height:36px;
line-height:36px;
border:1px solid green;
text-align:center;
}
.line
{
display:inline-block;
width:100px;
border-top:1px solid #cccccc;
vertical-align:5px;
  //看到网上有把.text设置为vertical-align:-5px的,试了一下感觉和.header设置的line-height有冲突,效果不太合适。所以将vertical-align设置到.line上了
}
</style>

2. css伪类实现效果:


<div class="header">
<div>中间文字,两边横线</div>
</div>
<style>
.header
{
width:400px;
height:36px;
line-height: 36px;
text-align:center;
border:1px solid green;
position:relative;
}
.header div:before,.header div:after
{
position:absolute;
background:#ccc;
content:"";
height:1px;
top:50%;
width:100px;
}
.header div:before{left:10px;}
.header div:after{right:10px;}
</style>

css实现中间文字,两边横线效果的更多相关文章

  1. css 怎么在文字两边加上横线

    <div class="title"> <h2 class="title-text"><span>工作经历</span ...

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

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

  3. CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

    本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果. 起因 一日,一群友私聊问我.如何使用 CSS 实现下述效果,一个文字的波浪效果: 我当时想都没想,就回 ...

  4. Js制作点击输入框时默认文字消失的效果

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...

  5. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  6. css实现发光文字,以及一点点js特效

    效果图: 代码如下: </head> <style> body{ background-color:#000; } .textArea{ font-size:100px; co ...

  7. CSS3实现文字折纸效果

    CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...

  8. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  9. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

随机推荐

  1. SpringMVC中重定向传参数的方法

    在spring的一个controller中要把参数传到页面,只要配置视图解析器,把参数添加到Model中,在页面用el表达式就可以取到.但是,这样使用的是forward方式,浏览器的地址栏是不变的,如 ...

  2. 总结day24 ---- socket ,struct 的学习

    前情提要 一:套接字  socket()  1:三次握手 1:客户端像服务端链接,   (第一次握手) 2:服务端收到请求,告诉客户端服务端收到了内容    (第二次握手1) 3:服务端像客户端连接, ...

  3. 晦涩难懂的shell命令

    初学shell脚本,过程中发现许多不易于理解的脚本语言,网上各种查找学习之后,择优精简一番,做出以下总结,方便以后遗忘了回顾,也为像我一样的初学者提供方便——推荐给初学者的一本书:<Linux ...

  4. leetcode-200-岛屿的个数(dfs找所有的连通分量)

    题目描述: 给定一个由 '1'(陆地)和 '0'(水)组成的的二维网格,计算岛屿的数量.一个岛被水包围,并且它是通过水平方向或垂直方向上相邻的陆地连接而成的.你可以假设网格的四个边均被水包围. 示例 ...

  5. FlowPortal-BPM——管理员、功能的权限设置

    一.管理员设置 管理工具→安全组→安全组名称→管理授权→[添加管理人员]→[设置管理人员权限] 二.访问功能权限设置 (1)模块访问权限 (2)访问控制→[在需要的文件夹下]新建子资源→[资源名称]. ...

  6. Zynq-7000 FreeRTOS(二)中断:Timer中断

    总结Zynq-7000 这款器件中的Timer定时器中断,为FreeRTOS中断做准备.在 ZYNQ 的纯 PS 里实现私有定时器中断. 每隔一秒中断一次, 在中断函数里计数加 1, 通过串口打印输出 ...

  7. Linux/Mac安装oh-my-zsh后不执行~/.bash_profile、~/.bashrc解决办法

    安装了zsh之后默认启动执行脚本变为了-/.zshrc. 解决办法: Mac: 修改-/.zshrc文件,在其中添加:source -/.bash_profile.source -/.bashrc:注 ...

  8. Mac OS X中Launchpad的图标添加删除方法(添加方法别试了,和Linux很大区别)

    说明:在Mac下的Launchpad图标添加和删除都与应用程序的app文件有关,如果单纯的只想在Launchpad添加自定义的图标,然后指定要某条命令运行时,建议不要这么干,Launchpad的图标管 ...

  9. redis 持久化之 rdb 快照持久化

    解释1: 虽然redis是单进程,但是它有一个单独的子进程进行rdb操作,为了保证的数据的一致性,当进行rdb操作失败的时候,主进程就停止写入 所以才有了stop-write-on-bgsave-er ...

  10. nginx设置开机自启动

    每次启动nginx服务都需要到安装目录下的/sbin下面,感觉挺麻烦的. 下面介绍一下如何在Linux(CentOS)系统上,设置nginx开机自启动. 1 用脚本管理nginx服务 第一步:在/et ...