运用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

  }

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