css如何实现中间文字两边横线效果

小编给大家分享一下css如何实现中间文字两边横线效果 ，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

1. vertical-align属性实现效果：

vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

<div class="header">    <span class="line"></span>    <span class="text">中间文字，两边横线</span>    <span class="line"></span></div><style>.header{    width:400px;    height:36px;    line-height:36px;    border:1px solid green;    text-align:center;}.line{    display:inline-block;    width:100px;    border-top:1px solid #cccccc;    vertical-align:5px;  　　//看到网上有把.text设置为vertical-align:-5px的，试了一下感觉和.header设置的line-height有冲突,效果不太合适。所以将vertical-align设置到.line上了}</style>

2. css伪类实现效果：

<div class="header">    <div>中间文字,两边横线</div></div><style>    .header    {        width:400px;        height:36px;        line-height: 36px;        text-align:center;        border:1px solid green;        position:relative;    }    .header div:before,.header div:after    {        position:absolute;        background:#ccc;        content:"";        height:1px;        top:50%;        width:100px;    }    .header div:before{left:10px;}    .header div:after{right:10px;}</style>

以上是“css如何实现中间文字两边横线效果 ”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！