介绍 & lt; div 类=癶eader"比;
,,,& lt; span 类=發ine"祝辞& lt;/span>
,,,& lt; span 类=皌ext"祝辞中间文字,两边横线& lt;/span>
,,,& lt; span 类=發ine"祝辞& lt;/span>
& lt;/div>
& lt; style>
.header
{
,,,宽度:400 px;
,,,身高:36 px;
,,,行高:36 px;
,,,边界:1 px solid 绿色;
,,,text-align:中心;
}
.line
{
,,,显示:inline-block;
,,,宽度:100 px;
,,,border-top: 1 px solid # cccccc;
,,,vertical-align: 5 px;,,//看到网上有把。text设置为vertical-align: 5 px的,试了一下感觉和.header设置的行高有冲突,效果不太合适。所以将vertical-align设置到.line上了
}
& lt;/style> & lt; div 类=癶eader"比;
,,,& lt; div>中间文字,两边横线& lt;/div>
& lt;/div>
& lt; style>
,,.header
,,,{
,,,,,,,宽度:400 px;
,,,,,,,身高:36 px;
,,,,,,,行高:,36 px;
,,,,,,,text-align:中心;
,,,,,,,边界:1 px solid 绿色;
,,,,,,,位置:相对;
,,,}
,,,.header div:之前、.header div:之后
,,,{
,,,,,,,位置:绝对;
,,,,,,,背景:# ccc;
,,,,,,,内容:““;
,,,,,,,身高:1 px;
,,,,,,,:50%;
,,,,,,,宽度:100 px;
,,,}
,,,.header div:在{左:10 px;}
,,,.header div:{右:10 px;}
& lt;/style>
小编给大家分享一下css如何实现中间文字两边横线效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强> 1。vertical-align属性实现效果:
vertical-align属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
<强> 2。css伪类实现效果:
以上是“css如何实现中间文字两边横线效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
