floatで横並びにしたli(リスト)をセンターにする方法

2012-08-04    249   447

ページャを作る時に重宝するテクニックです。floatで横並びにした場合、text-align:center;ではセンターにはなりません。potosion(ポジッション)を使って実現させます。

<CSS>


div.pager { font:14px Arial,Helvetica,sans-serif; position:relative; overflow:hidden;}
div.pager ul{ float:left; position:relative; left:50%;}
div.pager ul li { float:left; position:relative; left:-50%;}
div.pager li{ float:left; margin-right:5px; border:1px #DEE solid;}
div.pager li.prev,
div.pager li.next{ border:none;}
div.pager li a{ padding:8px 12px; display:block; color:#4AC;}
div.pager li a:link,
div.pager li a:visited{ text-decoration:none;}
div.pager li a:hover,
div.pager li a:active{ background-color:#EFF; text-decoration:none;}
div.pager li em{ display:block; padding:8px 12px; background:#4AC; color:#FFF;}
↑ポイントになるのは最初の3行。親ボックスとul、liにposition:relative;を使用しています。

<HTML>


<div class="pager">
    <ul>
        <li><em>1</em></li>
        <li><a href="/search/?p=2">2</a></li>
        <li><a href="/search/?p=3">3</a></li>
        <li><a href="/search/?p=4">4</a></li>
        <li><a href="/search/?p=5">5</a></li>
        <li><a href="/search/?p=6">6</a></li>
        <li><a href="/search/?p=7">7</a></li>
        <li><a href="/search/?p=2" class="next">NEXT</a></li>
    </ul>
</div>

カテゴリ: CSS

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

まりりん1月29日

はじめまして!
私も全く同じとこで詰まってかなりググったのですが、なかなか見つけられずで、いろいろ検索ワードを変えてるうちにここにたどり着きました。"" が駄目な時は nullを使えと!!
なるほどです。無事にうまく出来ました。本当にどうもありがとうございました~~~!!!

1 返信

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする
この記事がお役に立てましたら是非シェアのご協力お願いします。