标题左右两个横线 css,Demo—标题左右两侧的对等横线

各种类型的线条

*{

margin: 0;

padding: 0;

}

.container{

height: 100px;

font-size: 24px;

font-weight: bold;

background: #f3f3f3;

margin-bottom: 30px;

text-align: center;

line-height: 100px;

}

.line_one h3{

vertical-align: middle;

text-align: center;

line-height: 100px;

}

.line_one h3 span{

vertical-align: middle;

display: inline-block;

padding: 0 50px;

}

.line_one h3:before,.line_one h3:after{

display: inline-block;

vertical-align: middle;

content: "";

width: 100px;

height: 3px;

background: #000000;

}

.line_two span{

letter-spacing: -1px; //通过设置字符间距是线之间的空白消失

}

.line_two strong{

padding: 0 50px;

}

世界那么大

—————————

世界那么大

—————————