1. vertical-align屬性實現效果：
vertical-align 屬性設置元素的垂直對齊方式。
該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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偽類實現效果：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<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實現中間文字兩邊橫線效果