[CSS]要素を横並びに配置できるdisplay:table-cellの基本的な使い方と注意点

要素を横並びで配置するには、CSSのfloatやdisplay:inline-blockを用いるか、あるいは <table> タグを用いるか…の方法がありますが、
今回紹介させていただくdisplay:table-cellでも同じことができます。

float などとの大きな違いは「要素を均等幅で配置できる」ので、スマホのような可変のデザインにも適している点だと思います。

display:table-cell のメリットと注意点

display:table-cell のメリット

個人的にはこの辺がdisplay:table-cellを使うメリットだと思います。

display:table-cell の注意点

上記のような素晴らしいメリットがあるのになかなか積極的に使えない…理由は以下の注意点があるためです。

スマホやタブレット向けのサイトの構築をする時、また IE下位バージョンへの対応を切り捨てられる時であればどんどん使いたいですね。

display:table-cell の基本的な使い方

display:table-cellは以下のような使い方をします。

親要素に display:table を指定し、テーブル扱いとする

display:table-cellはdisplay:tableとセットで使う事が多いです。

親要素（ul.nav）にdisplay:tableを指定することで「表（<table>）」の扱いになりますので、子要素（ul.nav li）にdisplay:table-cellを指定して <table> の「セル（TD）」と同じ扱いにすることができます。

これで TD 同様、vertical-align:middleで縦位置の指定もできるようになります。

display:table-cell の基本的な使い方 のデモ

均等幅で配置するために、親要素に table-layout:fixed を指定

上記までの例で子要素（ul.nav li）は横並びで配置できますが、均等幅の配置まではできません。

均等幅に配置するには、親要素（ul.nav）にtable-layout:fixedを利用します。
※親要素の幅を決めないといけないので、widthの指定も必要になります。

要素を均等幅で配置するデモ