- Float 水平居中浮动 更新时间:2014-03-05
-
大家知道,CSS有float:left和float:right,但能否实现float:center呢?水平居中浮动,当然是可以的,这里将介绍你实现方法。以下面的Li列表为例,我们要实现中间LI的居中浮动:
1
<
div
id
=
"macji"
>
2
<
ul
class
=
"macji-skin"
>
3
<
li
>列表一</
li
>
4
<
li
>列表二</
li
>
5
<
li
>列表三</
li
>
6
</
ul
>
7
</
div
>
我们需要先了解下position:relative属性,它是指left、right、top、bottom等中的偏移位置。我们可以让ul为position:relative;left:50%,再让li向左浮动,再让position:relative;right:50%(或者left:-50%),那么li就会向中间浮动一样居中了。不相信的可把下面的CSS定义结合上边的代码拷贝到HTML测试。
01
#macji{
02
position
:
relative
;
03
width
:
100%
;
04
height
:
80px
;
05
background-color
:
#eee
;
06
text-align
:
center
;
07
overflow
:
hidden
;
08
}
09
#macji .macji-skin{
10
float
:
left
;
11
position
:
relative
;
12
left
:
50%
;
13
}
14
#macji .macji-skin li{
15
position
:
relative
;
16
right
:
50%
;
17
float
:
left
;
18
margin
:
10px
;
19
padding
:
0
10px
;
20
border
:
solid
1px
#000
;
21
line-height
:
60px
;
22
}
虽然这样用有些麻烦,但对于一个优秀的前端设计师,这个技巧还是有必要掌握的哦。
Float 水平居中浮动
最新推荐文章于 2022-03-31 19:07:29 发布