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

  }

  雖然這樣用有些麻煩，但對於一個優秀的前端設計師，這個技巧還是有必要掌握的哦。