中间文字，两边横线（纯css实现）

遇到了一个中间文字，两边横线的布局，效果如下图：

第一种方法：使用了背景色和透明度，细心的人可能会发现，body设置的背景色刚好是‘工商信息’的文字的背景色，同时也用了行内块、透明度以及相对定位来实现
第二种方法：vertical-align 的属性就会发现有length 和 % 两个属性

第三种方法：使用css伪类

具体代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>测试</title><style>/* 方法1：*/body{background: #fff; width: 888px; margin:15px auto;}.con{position:relative;height:1.875rem;line-height: 1.875rem;margin:0 auto;text-align: center;}.con i{display:block;height:1px;background:#e1e1e1;position:absolute;top:0.9rem;width:100%;}.con p{display:inline-block;font-size: 16px;color:#1D2089;background:#ffffff;padding:0 1.875rem;text-align: center;margin:0 auto;position:relative;z-index:2;}/* 方法2：*/.order {height:1.875rem;line-height:1.875rem;text-align: center;}.order .line {display: inline-block;width: 45%;border-top: 1px solid #ccc ;}.order .txt {color: #1D2089;vertical-align: -4px;font-size: 16px;}/* 方法3：*/.wrap {position: absolute;text-align: center;width: 84%;margin: 15px auto;}.wrap div {line-height: 20px;color: #1D2089;font-size: 16px;}/*CSS伪类用法*/.wrap div:after, .wrap div:before {position: absolute;top: 50%;background: #ddd;content: "";height: 1px;width: 45%;}/*调整背景横线的左右距离*/.wrap div:before {left: 0;}.wrap div:after {right: 0;}</style>
</head>
<body>
<!--1:使用了背景色和透明度，细心的人可能会发现，body设置的背景色刚好是‘工商信息’的文字的背景色，同时也用了行内块、透明度以及相对定位来实现-->
<div class="con"><i></i><p>工商信息</p>
</div><!--2:vertical-align 的属性就会发现有length 和 % 两个属性-->
<div class="order"><span class="line"></span><span class="txt">工商信息</span><span class="line"></span>
</div><!--3:使用css伪类-->
<div class="wrap"><div>暂无数据</div>
</div>
</body>
</html>

中间文字，两边横线（纯css实现）相关推荐

html文本居中左右有横线,CSS伪类实现中间文字两边横线效果
利用CSS伪类实现中间文字两边横线效果效果图: 实现代码: CSS伪类实现中间文字两边横线效果 body { margin: 0; } .login_content { position: abso ...
html字两边的横线_css实现中间文字两边横线效果
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...
html字两边的横线_CSS，中间文字两边横线 CSS样式写法
在项目中遇到过中间文字,两边横线的布局,如下图: 两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制. 产品清单 css.order { hei ...
css 多行文字左对齐,纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
CSS伪类实现中间文字两边横线效果
一.通过display:table实现 html <div class="line">中间文字</div> css .line {display: tabl ...
CSS实现文字两边横线,CSS实现文字两边线条
先看效果,其他方式登陆两边各有一条横线代码如下,用的是scss语法: uniapp中,如果是普通的html,将view替换成div即可. <view class="other-log ...
html文字两边是线条,css 两边是线，中间文字的多种实现方法
css 两边是线,中间文字的多种实现方法历史活动一历史活动二历史活动三 .soild_text_one{ width:500px; margin:0 auto; fieldset{ height ...
html字两边的横线_css实现中间文字两边横线(原创）
/* 方法1:*/ body { background:#fff; width:888px; margin:15px auto; } .con { position:relative; height: ...
HTML怎么制作镂空文字遮罩,用纯 CSS 实现镂空效果
背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都是. 这样,做简单的图片背景镂空效果便不再困难了.关键代码只有几行. ...
HTML怎么制作镂空文字遮罩,用纯CSS实现镂空效果的示例代码
近来研究了一下镂空效果. background-clip: text 背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都 ...

中间文字，两边横线（纯css实现）

中间文字，两边横线（纯css实现）相关推荐

最新文章

热门文章