position:relativeを使ってfloatしたボックスを中央寄せにする方法

サイトを作る時、中央寄せにする場合は通常text-align: center;やmargin: 0 auto;と記述します。

しかし、floatしたボックスを中央寄せしようとしてもfloatのせいで真ん中に来てくれません。

調べてみたらいろんな方法が出てきたので、その中でも気に入ったものを備忘録がてら書いておきます。

display:flexを使って要素を上下左右中央寄せにする

display:flexを使って要素を上下左右中央寄せにする方法について、下記の記事で細かく解説してます。

コピペで使えるコードをご紹介してます。たったの3行追記するだけなので、簡単に実装できますよ。

position:relativeを使うパターン

floatで並べたリストのセンタリング – Weblog – hail2u.net

この方法が気に入ったのでしばらく使っていこうと思います。
ソースが簡潔だし、width指定しなくてもいいのが助かります。

.centered {
  position: relative;
  overflow: hidden;
}

.centered ul {
  position: relative;
  left: 50%;
  float: left;
}

.centered ul li {
  position: relative;
  left: -50%;
  float: left;
}

displayプロパティを使うパターン

横並びリストを中央寄せにする – CSSテクニック – acky info

このサイトの中で、特に一番上のブロック要素のまま中央寄せする方法は良い感じでした。
幅をがっちり決め込む時にはこちらもよさそうです。

ul{
margin-right:auto;
margin-left:auto;
width:21em;
}

li{
float:left;
padding-right:1em;
}

li a{
display:block;
background-color:#999999;
width:6em;
height:3em;
text-align:center;
line-height:3em;
}

ただこのソース、em使ってるので僕には分かりづらいです。％でwidth指定したら真ん中に来ないし。ちょっと謎です。ただの計算間違いかもしれないですが。

あと、そのサイト内のインラインブロック要素を使った方法を試したところ、同じボックス内にdisplay:none;で非表示にしようとしてるところがある場合に、そちらが表示されてしまうという現象も起こりました。使う際には注意が必要ですね。

最後に

floatを使う機会自体も減ってきてますし、display:flexを使った方法が一番おすすめかと思います。

簡単に使えますので、是非お試しください。