运用CSS实现float:center 居中浮动li

运用CSS实现float:center 居中浮动li

标签：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测试。

view
source

print?

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

}

虽然这样用有些麻烦，但对于一个优秀的前端设计师，这个技巧还是有必要掌握的哦。