文字分割线的三种方法

为什么80%的码农都做不了架构师？>>>   

有很多网站都有这么一种实现：就一条分割线的中间有文字的显示，以下则列出三种实现方法。

第一种实现方法的思路是设置 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 的高度，而第三种所占的高度是文字的高度。如果背景只是纯色的话三种方法均可，但如果是有背景图当背景的话，则第二种方式不适合。

转载于:https://my.oschina.net/cobish/blog/687104