[CSS] floatで一列にしたリスト等を中央配置にする方法

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などには装飾を施してくださいね。

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

タグ:, , , ,

関連する投稿

This entry was posted in CSS, Coding and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">