为行内元素画长宽可变化的居中分隔线
1、采用display:inline-block样式
这个属性通俗一点的解释就是让块级元素可以在一行显示。既是块级元素又可以在同一行显示就可以设置display:inline-block.
<p><div></div>lalalalalala<div></div></p>
css部分：
div {
display: inline-block;
height:1px;
width:10%;
background:#00CCFF;
overflow:hidden;
vertical-align: middle;
}
2、如果要做的网页背景色是纯色的话可以用这个方法来实现，代码很简洁，并且宽度可以自适应显示。这个方法主要就是设置文字的背景来盖住文字所在部分的线。
<div class="line">
<span>小小分隔线 字符来实现</span>
</div>
css部分：
.line {
height:1px;
border-top: solid 10px #00CCFF;
text-align: center;
margin-top: 10px;
}
.line span{
position: relative;
top: -20px;
background-color: #ffffff;
padding: 0 20px;
}
3、用一个标签来实现
其中，line-height来控制分割线的粗细，border-left与border-right的线条宽度控制分割线的左、右width.
<div class="line">
<span>小小分隔线 字符来实现</span>
</div>
css部分：
.line {
margin: 40px 0;
line-height: 1px;
border-left: solid 100px #00CCFF;
border-right: solid 100px #00CCFF;
text-align: center;
}
4、横线字符输入
直接在代码中用输入法打入——就可以了，也是比较简洁的实现方式，宽度与高度不可控。
<div class="line">
—————————————<span>小小分隔线 字符来实现</span>——————————
</div>
css部分
.line {
letter-spacing: -1px;
color: #aa3333;
}
.line span{
letter-spacing:;
margin: 0 10px;
color: #000000;
}
5、浮动实现
float：left与margin-top联合使用
<div class="box">
<span class="line"></span>
<span class="text">小小分隔线 字符来实现</span>
<span class="line"></span>
</div>
css部分：
.box{
width: 600px;
overflow: hidden;
zoom:;
}
.line {
background-color: #0bb59b;
margin-top: 10px;
float: left;
width: 100px;
height: 5px;
}
.text{
float: left;
margin: 0 10px;
}
6、伪类before、after与绝对定位
<div class="line">
<span>小小分隔线</span>
</div>
css部分
.line{
width: 600px;
position: relative;
text-align: center;
zoom:;
}
.line span:before {
content: "";
width: 200px;
height: 20px;
position: absolute;
border-top: solid 6px #aa3333;
right:;
top: 7px;
}
.line span:after {
content: "";
width: 200px;
height: 20px;
position: absolute;
border-top: solid 6px #aa3333;
left:;
top:7px;
}