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

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

text-align:centerを使う

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

marginを使う

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

positionを使う

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

<div class="wrap">
<div class="box">ボックス</div>
</div>

.wrap{
position:relative;

}
.box{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
}

* position:fixedでもいけます。

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

擬似要素を使う。

.wrap2{
text-align:center;
}
.wrap3:before{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
margin-right:-0.25em;
}
.box{
display:inline-block;
vertical-align:middle;
}

 

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

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

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

<div class="nav">
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</div>

.nav{
position:relative;
overflow:hidden;
}
.nav ul{
position:relative;
float:left;
left:50%;
}
.nav ul li{
position:relative;
float:left;
left:-50%;
}

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

センタリング DEMO

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

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