[CSS]liをfloatして横に並べてそれを中央配置にするオレ的まとめ

もうタイトルが何言ってるか分からないですが読んだ通りですはい。

いや、説明するとliをfloat:leftすると左揃えになってしまうものを中央に配置してしまおうと言うことです。分かったかな?
方法は何通りかあると思いますが、これならOK的なものを紹介します。

display:inline-blockを使う方法

display:inline-blockを使う方法は横並びになったliとliの間に隙間が空くのが特徴。
なので全体の幅が決まってる場合は使わない方がいいですね。

html

CSS

サンプルはこちら
inline-blockはIE7以下はきかないので*display: inline;と*zoom: 1;で対応しています。
※hasLayoutについてはこの辺を読んでみてください。

なぜinline-blockなのか

inlineでも良さそうですがinline-blockにすることで

  • widthとheightが指定できる
  • 上下左右にmarginとpaddingを指定できる
  • text-alignを親ブロックに指定できる

inline-blockなわけです。

おまけのposition: relative;を使う方法

html

CSS

サンプルはこちら

まとめ

簡単にできそうでできない中央配置、やってみると意外と簡単です。
グーグル先生に聞くと幅を指定する方法がやたら出てきますが、中央配置の出番って「次の○件へ」みたいなページャーが多いので幅指定はできないですよね。
この方法だったら幅指定する必要もないので。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク