ホーム > ブログ > コーディングTips > inline-blockでセンタリングして横並び

inline-blockでセンタリングして横並び

2015.03.14

こんにちは、銀ねこです。
皆さんご存知だと思うのですが、cssのdisplay:inline-block;を使ってフッターナビなどでよく見かける要素をセンタリングして 横並び並べる方法についてまとめました。

display:inline-blockとは?

通常見出し(h1、h2)、段落(p)、リスト(li)など初期値がブロック要素のものはひとつのまとまった単位として表される要素で 一般的なブラウザでは前後に改行が入って表示されます。

通常、リンク(a)、画像(img)などの初期値がインライン要素は、主に文章の一部として利用される要素でその前後は改行されません。

display:inline-blockを指定すると、インラインレベルのブロックコンテナを生成し、要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できるようになります。 
これを使えば、指定したタグを文章の一部のように使えるのでセンタリング(text-align:center;)のように指定できるようになり、いい感じで横並び&センタリングできて非常に重宝します。

要素と要素の間に余分な余白ができる問題

ただ、面倒なのが「文章の一部として扱える」ので指定した要素に変な文字間ももれなくついてきます。

  1. //css
  2. #nav ul{
  3. text-align:center;
  4. }
  5. #nav li{
  6. display:inline-block;
  7. border-left:1px solid #000000;
  8. padding:0 5px;
  9. }
  10. #nav li:first-child{
  11. border:none;
  12. }
  13.  
  14. //html
  15. <nav id="nav">
  16. <ul>
  17. <li>トップページ</li>
  18. <li>当サイトについて</li>
  19. <li>お知らせ</li>
  20. <li>お問い合わせ</li>
  21. </ul>
  22. </nav>

このままだと分かりにくいのでli要素に色を付けてみましょう。

ご覧のとおり右側にしっかり余白ができてしまうのが分かります。

inline-block要素を指定した親要素のフォントサイズを0にすることで解決

余分な余白は要素的には文字として判断しているので、親要素のフォントサイズを0にすることで文字間をなくすことができます。文字サイズがそもそも0なので無駄な文字間も生まれません。

親要素で文字間をリセットするために指定したフォントサイズはinline-blockを指定した子要素で復活させます。

  1. //css
  2. #nav ul{
  3. text-align:center;
  4. font-size:0;
  5. }
  6. #nav li{
  7. display:inline-block;
  8. border-left:1px solid #000000;
  9. padding:0 20px;
  10. font-size: 12px;
  11. }
  12. #nav li:first-child{
  13. border:none;
  14. }
  15.  
  16. //html
  17. <nav id="nav">
  18. <ul>
  19. <li>トップページ</li>
  20. <li>当サイトについて</li>
  21. <li>お知らせ</li>
  22. <li>お問い合わせ</li>
  23. </ul>
  24. </nav>

これでスッキリ、無駄な余白が無くなりました。

この記事のタグ