センタリング(中央揃え)のまとめ

    テキストや要素をセンタリングするのにちょっくら迷ったのでこの機会にまとめておくことに。

    text-align:centerを使う

    最もカンタンと思われる方法。
    但し、インライン要素にしか効かない。
    なんで効かないんだろうと思ったらdisplay:blockをしてされていたってことが。。。

    marginを使う

    横幅が決まっている要素ならコレでも良い。
    margin:0 auto;

    positionを使う

    これも(縦横)中央揃えする要素のサイズが決まっている時に有効です。
    width:200px height:100pxの要素をセンタリングするには

    * position:fixedでもいけます。

    要素のサイズがわからない場合

    擬似要素を使う。

     

    [CSS]サイズが分からない要素を真ん中に配置するテクニック
    http://coliss.com/articles/build-websites/operation/css/css-centering-in-the-unknown-by-css-tricks.html

    floatさせた要素をセンタリングする

    listを使ったナビゲーションをセンタリングしたいときなどに。

    リスト全体(ul)を右に50%ずらし、各リスト(li)をネガディブマージンで左に50%戻す。

    センタリング DEMO

    floatで並べたリストのセンタリング
    http://hail2u.net/blog/webdesign/centering-floated-list.html

    中央揃えでもいろいろなテクニックがありますね。

    SNSでもご購読できます。