html字两边的横线_css实现中间文字 两边横线(原创）

/* 方法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;

}