Accumulate Kuibu, Poly stream-------Several methods to realize the dividing line

In fact, this problem has been realized for some time, just to think of a simple way to achieve the effect, did not think of too many ways to, the most important thing is, I do not know this is called "Split line", only know what, even search is not know how to search, who happened today met, learn the next, first to describe the next to achieve The split line effect.

Yes, this is the effect, remember, this is called "Split line" ...

The first reaction is to cascade up to achieve the effect, but also the method has been used before

Today I learned a few other methods, small and fruitful.
<div class= "line_divide" >
Then set the style
. 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;}
Does this look very tall, and then look at a more concise
<div class= "Line_divide" > ——————————— <span>
Generally speaking, the first reaction is not all directly add "-" is good, but there is no way "-" and "-" there is always some gap between, this is in the ointment, but if the gap between the gaps, and then learn a new style
. line_divide{    letter-spacing: -3px;    Color: #ddd;}. Line_divide span{    letter-spacing:0;    Color: #222;    margin:0 20px;}
Letter-spacing: letter spacing, supported by all browsers, allowed to be negative, can be default, set fixed value and inherited value of parent class (incompatible with IE), w3cschool that's what it says, good stuff.
Although these methods have been good enough to achieve the desired needs, but also see a trouble point, but also learned a lot of things a way:
<div class= "line_divide" ><b></b><span>
And look at its style.
. 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;}
This is to see the original code, inside see two very good style ah, vertical-align and Display:inline-block, suddenly as if back to the beginning of learning, all used Ah, used here, wonderful AH

To sleep, there is no heating in this room really need to life ah, feel the hands are frozen ...








Accumulate Kuibu, Poly stream-------Several methods to realize the dividing line