floatで横並べにしたものを中央に配置したい

 リストなどのブロック要素を横並びにするには float や inline-block を使うと思いますが、これら横並びにしたものをまとめて中央に配置したいことがあると思います。幅が決まっている場合にはそれほど難しくないのですが、ページネーションのような記事数によって横幅が変化するものの場合、結構難易度が上がります。

幅が固定されているなら簡単

まずは float を使って横並べしたものを中央寄りにする場合を考えてみます。少しページネーションを意識してデザインしてみました。

20161106_2_1

HTML と CSS は次のようになります。

幅が固定されているなら、リストの親要素である parent クラスに幅を指定して margin:0 auto; を追加するだけです。

今回のページネーションもどきは、幅が 35px の数字ブロック×6、1px 枠線が左右2本×6、数字ブロック間の隙間が 10px ×5となっているので、

35×6+1×2×6+10×5=272

となるのでスタイルシートは次のようになります。

これで中央寄りにすることができます。

20161106_2_2

幅が未定の場合

ブログの記事数が少ないとページネーションは幅が未定であるため、上記のような方法を使うことができません。次のソースコードを追加します。

すべて記述すると次のようになります。

li で横並べにするための float と ul の float が重複しているように感じるかもしれませんが、ul の float を試しに削除してみると、中央に配置されなくなります。原因はよくわからない。

理屈はともかく、この方法にすれば幅が決まっていない float で横並べにしたものが中央に配置されるようになります。

inline-blockのほうがわかりやすい

こちらのほうがシンプルでわかりやすいです。先ほどのページネーションもどきを inline-block で実現すると、スタイルシートは次のようになります。説明の流れで parent クラスを残していますが、使わないので削除しても大丈夫です。ul や li を div タグで囲まなくても済むということですね。

inline-block によって横並べにしたものを中央寄りにするには、ul タグに text-align を設定するだけです。ここでは pagination クラスのことですね。

ブロック要素内のテキストを text-align によって中央寄りにするイメージです。インラインブロックという名前からも、inline-block 指定された li はインライン要素のように取り扱えるというわけです。この方法の良いところは、幅が決まっていてもいなくても、同じ方法で中央に配置可能なことです。inline-block を使ったページネーションについてはこちらで記事にしているので、あわせてお願いします。

inline-blockで要素を横並びにする | Naokix.net

float と inline-block のどちらを使っても結果は同じですが、私は感覚として覚えやすい inline-block のほうが好きです。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


TOP