Front End Programming

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

CSS

cssのdisplay:inline-block;を使ってフッターナビなどでよく見かける要素をセンタリングして 横並び並べる方法についてまとめました。

display:inline-blockとは?

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

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

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

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

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

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

//css
<style>
#nav ul{
    text-align:center;
}
#nav li{
    display:inline-block;
    border-left:1px solid #000000;
    padding:0 5px;
}
#nav li:first-child{
    border:none;
}
</style>
 
//html
<nav id="nav">
    <ul>
        <li>トップページ</li>
        <li>当サイトについて</li>
        <li>お知らせ</li>
        <li>お問い合わせ</li>
    </ul>
</nav>

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

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

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

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

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

//css
<style>
#nav ul{
    text-align:center;
    font-size:0;
}
#nav li{
    display:inline-block;
    border-left:1px solid #000000;
    padding:0 20px;
    font-size: 12px;
}
#nav li:first-child{
    border:none;
}
</style>
 
//html
<nav id="nav">
    <ul>
        <li>トップページ</li>
        <li>当サイトについて</li>
        <li>お知らせ</li>
        <li>お問い合わせ</li>
    </ul>
</nav>

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

関連記事もあわせてお読みください

Read More

記事のジャンル

管理人について

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に10年以上Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me