积跬步，聚小流-------几种方法实现分割线

其实这个问题想了实现了有一段时间了，只是单纯自己想了个办法简单实现了效果，没想出太多办法来，最关键的是，我也不知道这原来是叫“分割线”，只知道是什么样，连搜都不着知道怎么搜，赶巧今天碰到了，就学习了下，先来描绘下要实现的“分割线”效果。



对，就是这个效果，记住了，这叫“分割线”...

最开始反应过来的是层叠起来实现效果，也是之前一直在用的方法

<hr width="80%"/>
<div style="position: relative;top: -40px;background-color: white;width: 200px;"><h1>登 录</h1></div>今天又学习了另外几个方法，小有收获
<div class="line_divide"><h1>登 录</h1></div>然后进行样式设定
.line_divide{
padding: 0 20px;
margin: 0 80px 0;
line-height: 1px;
border-left: 240px solid #ddd;
border-right: 240px solid #ddd;
text-align: center;
}这个看起来是不是很高大上啊，再来看个更简洁的
<div class="line_divide">———————————<span><h1>登 录</h1></span>————————————</div>一般来说，最先反应过来的是不是都是直接加“-”就好了呢，但是没办法“-”和“-”之间总有一些间隔，这就美中不足了，但是如果中间的间隔空隙没有了呢，然后就学到了一个新的样式
.line_divide{
letter-spacing: -3px;
color: #ddd;
}
.line_divide span{
letter-spacing: 0;
color: #222;
margin:0 20px;
}letter-spacing:字母间距，所有浏览器都支持，允许为负值，可以为默认值、设定固定值和父类继承的值（不兼容IE），w3cschool就是这么写的，好东西啊。
虽然说这几个方法已经很好的达到了所想要的需求，但是同时看到了一个麻烦点，但是也学到了不少东西的一个方法：

<div class="line_divide"><b></b><span><h1>登 录</h1></span><b></b></div>再来看下它的样式
.line_divide{
width:600px;
}
.line_divide b{
background: #ddd;
margin-top: 4px;
display: inline-block;
width: 180px;
height: 1px;
_overflow: hidden;
vertical-align: middle;
}
.line_divide span{
display: inline-block;
width: 220px;
vertical-align: middle;
text-align: center;
}这是看到的原代码，里面看到了两个非常棒的样式啊，vertical-align和display:inline-block，突然仿佛回到了刚开始学习的时候，都用过的啊，用在这里，妙不可言啊

要睡了，这屋里没有暖气真要人命啊，感觉手要冻了...