cssのfloat横並びリストの左右中央揃えいろいろ

ページャーなどでよく使うCSSテクニックです。

横並びしつつ、そのブロック全体は左右中央にセンター揃え。

inline要素なら簡単に中央揃えできますが、block要素の横並び中央揃えは若干面倒でして、text-align:center;は使えないし、幅が決まっていなければmargin: 0 auto;も使えません。

CMSなどでliの個数が増減するタイプは幅が可変するので面倒です。

なんかいい方法ないかなぁと探していると良記事にめぐり合えました。

positionを使う方法

floatで並べたリストのセンタリング

http://hail2u.net/blog/webdesign/centering-floated-list.html

ポジションを使って中央揃えにするとのこと。

引用

.centered {

position: relative;

overflow: hidden;

}

.centered ul {

position: relative;

left: 50%;

float: left;

}

.centered ul li {

position: relative;

left: -50%;

float: left;

}

うーん、すばらしいです。

一番外枠につけている「overflow: hidden;」はウィンドウの横スクロールが出ないようにしたりclearfixのためと思われます。仕組みは少しややこしいですが、隙間ができないのでしっかり組みたい時に使っています。

display: inline-block;を使う方法

こちらは簡単な方法なんですが、隙間問題があります。

隙間の大きさを気にしない場合は気軽に実装可です。

<ul class="sample_list">

<li>リスト１</li>

<li>リスト２</li>

<li>リスト３</li>

</ul>

.sample_list {

text-align: center;

}

.sample_list li {

display: inline-block;

margin: 0 5px 0 0;

width: 35px;

border: 1px solid #000000;

}

こんな感じで書くと以下のように隙間ができます。

f:id:emj1025:20130807183640g:plain

これを防ぐには

方法１．htmlのソースで改行を使わない

<ul class="sample_list">

<li>リスト１</li><li>リスト２</li><li>リスト３</li></ul>

こちらはソースが読みにくいという欠点が。

あと、うちではプログラムを使う場合、出力時にこの方法でもソースが改行を含んでしまうので断念。

方法２．letter-spacingで行間を削除

inline-blockを並べた場合に発生する「隙間」を消去するCSS

http://inspire-tech.jp/2011/06/inline_block_spaces/

引用

.inline-block {

letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */

}

.inline-block li {

display: inline-block;

letter-spacing: normal; /* 文字間を通常に戻す */

width: 100px;

height: 100px;

border: 1px solid #000;

line-height: 100px;

text-align: center;

}

なるほど、こんな方法もあるのですね。

方法３．font-sizeを０にする

.sample_list {

text-align: center;

font-size: 0;/* ul内のfont-sizeをいったん0に*/

}

.sample_list li {

display: inline-block;

margin: 0 5px 0 0;

width: 35px;

border: 1px solid #000000;

font-size: 14px;/* li内でまたfont-sizeを戻してやる */

}