emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

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>リスト1</li>

 <li>リスト2</li>

 <li>リスト3</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

これを防ぐには

方法1.htmlのソースで改行を使わない

<ul class="sample_list">

<li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>

 

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

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

 

方法2.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;

}

 

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

 

方法3.font-sizeを0にする

.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を戻してやる */

}

font-sizeは要素的になじみがあるのでこれを使ってます。

font-sizeを再指定するとbodyとかの全体指定の文字サイズ変わったときに面倒なんですけどね。

あ、safariには非対応だそうです!却下で!(でもいつの間にかwindowsからsafari消えましたよね)

 

もっと調べてみるとこんな記事が…

 

display: inline-block; による隙間を消すCSS完全版

http://partisan.wwwxyz.jp/seed/2013/01/31/165435.php

 

表とか使って対応ブラウザとかわかりやすく書かれております。すごい!

 

私がこの記事書く必要まったくなかったですね。

自分用のメモということで…

 

追記 2015.04.07

inline-blockの方法ではボックスの高さを調整しなくて良いメリットもあるようです。

理解しておきたい、CSSによるインラインレイアウトの仕組み(inline-block編)Inline Layout─Frontrend Conference | HTML5Experts.jp

jsを使わないとできなかった、面倒な高さ揃え問題を解決できますね。floatが古いと言われる時代が来るのも目前?

 

[ハーシェルサプライ] HERSCHEL SUPPLY Anchor Sleeve for 13 inch MacBook 10054-00361-13 Salmon Picnic (Salmon Picnic)

[ハーシェルサプライ] HERSCHEL SUPPLY Anchor Sleeve for 13 inch MacBook 10054-00361-13 Salmon Picnic (Salmon Picnic)

 

 

emuramemo(c) All Rights Reserved.