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实现中间文字两边横线效果 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时con...
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以...
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以...
1.HTML5的内容类型 内容类型 描述 内嵌 向文档中添加其他类型的内容,例如audio...
解决方法如下: 第一种 使用iframe,但是目前使用iframe的人已经越来越少了,而...
注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸...
先点赞再看,养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...
简介: 企业上云多账号架构中,如何做到从上到下管理的同时,处理好员工的权限边...