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

2012-08-04    727   1847

ページャを作る時に重宝するテクニックです。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 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

まりりん2020年1月29日

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

1 返信

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

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

この内容でコメントを送る
コメントをする

オススメのCSSに関する記事

【レスポンシブ基本】スマホ閲覧の時だけ表示またはパソコンの時だけ表示するCSS最短テクニック 【レスポンシブ基本】スマホ閲覧の時だけ表示またはパソコンの時だけ表示するCSS最短テクニック
クロスブラウザ対応CSSハックの一覧 クロスブラウザ対応CSSハックの一覧
リンクや画像をマウスホバーの際にゆっくり変化させるCCSのみで最短の方法 リンクや画像をマウスホバーの際にゆっくり変化させるCCSのみで最短の方法
floatの回り込み解除にclearfixを使う floatの回り込み解除にclearfixを使う
Opacityをほとんどのブラウザで使えるようにする Opacityをほとんどのブラウザで使えるようにする
この記事がお役に立てましたら是非シェアのご協力お願いします。