Float 水平居中浮动

• 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{

  02position:relative;

  03width:100%;

  04height:80px;

  05background-color:#eee;

  06text-align:center;

  07overflow:hidden;

  08}

  09#macji .macji-skin{

  10float:left;

  11position:relative;

  12left:50%;

  13}

  14#macji .macji-skin li{

  15position:relative;

  16right:50%;

  17float:left;

  18margin:10px;

  19padding:0 10px;

  20border:solid 1px #000;

  21line-height:60px;

  22}

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