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

2012-08-04 16:51:12
ページャを作る時に重宝するテクニックです。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