有很多网站都有这么一种实现：就一条分割线的中间有文字的显示，以下则列出三种实现方法。 第一种实现方法的思路是设置 border 和 line-height，看看以下代码： <div class="li
有很多网站都有这么一种实现：就一条分割线的中间有文字的显示，以下则列出三种实现方法。
第一种实现方法的思路是设置 border 和 line-height，看看以下代码：
<div class="line-1">文字分割线-1</div>样式如下：
.line-1 { width: 150px; margin: 0 auto; line-height: 1px; text-align: center; border-left: 200px solid red; border-right: 200px solid red;}
第二种实现方法则是控制 top 属性，代码如下：
<div class="line-2"> <span>文字分割线-2</span></div>样式如下：
.line-2 { margin: 0 auto; width: 550px; height: 1px; text-align: center; background: blue;}.line-2 span { position: relative; top: -13px; background: #f7f7f7; padding: 0 20px;}
第三种实现方式则是利用 html 中的 fieldset 标签，具体代码如下：
<fieldset class="line-3"> <legend>文字分割线-3</legend></fieldset>样式如下：
.line-3 { width: 550px; margin: 0 auto; border-style: solid; border-width: 1px 0 0 0; border-color: green; text-align: center;}.line-3 legend { padding: 0 20px;}
最后比较以下三种方法吧。第一种和第二种方法里的文字和分割线只有 1px 的高度，而第三种所占的高度是文字的高度。如果背景只是纯色的话三种方法均可，但如果是有背景图当背景的话，则第二种方式不适合。
