今回は、css3を使って、要素を上下左右中央に配置してみたいと思います。

けっこう前は、tableタグを使えば簡単にできたのですが、
コーディング方法が進歩するにつれ、tableタグを使うのはかっこわるい等の理由(もっとちゃんとした理由があります笑)から、
廃れていき、実際の表組みでないとtableタグを使わなくなりました。

tableを使わないとなると、左右の中央は配置は簡単なんですが、
上下の中央はほぼといっていいほど出来ませんでした。

しかし、css3からdisplayのプロパティで、「table-cell」というものを使えば
できるようになります！

ただ、このプロパティはIE8から使えるようなので、IE7対応の場合は使えないですね。。。

まずはデモをご覧ください。

DEMO

それでは、table-cellの使い方を説明していきます。

table-cellを使って、上下左右中央に配置する

html

XHTML

<div class="box"> <li><p><img src="images/item_img01.jpg" /></p></li> <li><p><img src="images/item_img02.jpg" width="150" /></p></li> <li><p><img src="images/item_img03.jpg" width="200" height="150" /></p></li> <li><p><img src="images/item_img04.jpg" /></p></li> </div>

1 2 3 4 5 6 7

<div class="box">                          <li><p><img src="images/item_img01.jpg" /></p></li>                     <li><p><img src="images/item_img02.jpg" width="150" /></p></li>                     <li><p><img src="images/item_img03.jpg" width="200" height="150" /></p></li>                     <li><p><img src="images/item_img04.jpg" /></p></li>       </div>

css

CSS

.box li { float: left; margin: 0 20px 20px 0; border:1px solid #ccc; width: 240px; height: 240px; display: table; background-color: #fff; line-height: 0; text-align: center; } .box li p { vertical-align: middle; display: table-cell; line-height: normal; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.box li { float: left; margin: 0 20px 20px 0; border:1px solid #ccc; width: 240px; height: 240px; display: table; background-color: #fff; line-height: 0; text-align: center; } .box li p { vertical-align: middle; display: table-cell; line-height: normal; }

table-cellを使いたい場合、その親の要素にtableを設定しないと、
動かないようです。

この用途ではなく、カラムのレイアウトを組む場合にも、
table-cellは使えるようです。

tableタグ関係ということでついでに、
tableタグを使用していて、レスポンシブデザインに対応させたい場合、
tableがそのままだとスマホで見にくいことがありますので、
それを解消するための２つの方法をご紹介します。

tableタグをレスポンシブデザインに対応させる方法

こちらは、メディアクエリーを使い横幅に合わせて
th,tdのdisplayのプロパティをblockに変更するだけでできます。

以下がcssになります。

css

CSS

@media screen and (max-width: 480px) { .content table { border:none; width: 90%; margin: 0 5%; } .content table th,.content table td { width: 96%; display: block; border:none; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@media screen and (max-width: 480px)    { .content table { border:none; width: 90%; margin: 0 5%; }     .content table th,.content table td     {      width: 96%; display: block; border:none; } }

ただ、tableの列が多い場合はこれは難しいですね。。。

その場合ですが、もう一つの方法のdisplayのlist-itemを使用するのがいいかもしれません。

CSS

.content table.tbl2 td { display: list-item; list-style-position: inside; } .content table.tbl2 thead { display: none; } .content table.tbl2 td:nth-of-type(1):before { content:"【項目2】"; } .content table.tbl2 td:nth-of-type(2):before { content:"【項目3】"; } .content table.tbl2 td:nth-of-type(3):before { content:"【項目4】"; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.content table.tbl2 td { display: list-item; list-style-position: inside; } .content table.tbl2 thead { display: none; } .content table.tbl2 td:nth-of-type(1):before { content:"【項目2】"; } .content table.tbl2 td:nth-of-type(2):before { content:"【項目3】"; } .content table.tbl2 td:nth-of-type(3):before { content:"【項目4】"; }

あまり大きく変わらないんですけど、
なんとなくリスト風に出来たらちょっと違うんじゃないかということで・・・
見出しの文字を隠して、擬似要素のbeforeを使って入れているのですが、
これは修正があったらcss修正しないと行けないので、ちょっと微妙かな〜

もっと簡単でフレキシブルな方法があればぜひ知りたいですね！