floatかけて一列に並べると、それを枠の中央に置きたい時って時々ありますよね？（ブログのページをめくるときのナビゲーションとか）
そんなときは、最近私的にはやりの　”position”　と　”ネガティブマージン”　ですっきり解決です。

下記のようなリストで作ったナビゲーションがあったとします。

<ul class="pageNavi">
  <li>Page-1-</li>
  <li>Page-2-</li>
  <li>Page-3-</li>
  <li>Page-4-</li>
</ul>

CSSにこれを付け加えちゃいましょう。

.pageNavi{
  position:relative;
  overflow:hidden;
}
.pageNavi ul{
  position: relative;
  left: 50%;
  float: left;
}
.pageNavi ul li {
  position: relative;
  left: -50%;
  float: left;
}

pageNaviのクラスにpositionかけておくのはIE6対策らしいです。
これですっきり、中央配置！！

————————-　09/11/18　追記　————————-

上記の方法ではまったくうまくいきませんね・・・がせっぽくなってすみません。
IEでもうまくいく方法を追記させてもらいます。

<div  class="pageNavi">
<ul>
  <li>Page-1-</li>
  <li>Page-2-</li>
  <li>Page-3-</li>
  <li>Page-4-</li>
</ul>
</div>

CSSはこうです。

.pageNavi{
  position:relative;
  overflow:hidden;
  width:100%;
}
.pageNavi ul{
  position: relative;
  left: 50%;
  float: left;
}
.pageNavi ul li {
  position: relative;
  right:50%;
  float: left;
}

ulタグをdivで囲って、その囲ったものに対して各々position指定です。
囲った本体（上記サンプルではクラスの【pageNavi】）にはwidthの100%を指定しておいて、左と右で相殺させます。
別途ulなどには装飾を施してくださいね。

上の方法は業務で使いましたので、大丈夫のはず・・・・です・・・・

タグ:, , , ,

関連する投稿