Html
    Css
    Js

    
                        
/* 方法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:1rem;
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css实现中间文字 两边横线(原创)

更新时间:2019-08-13 09:57:27

0