CSS の display: table-cell と言うプロパティーを最近知りまして、float を使わずにカラムレイアウト出来たり、縦方向の中央に要素を配置できたりして便利そうなのでサンプルを書いてみました! – display: table-cell のサンプル どんな事が出来るのか? ———————————————————————- HTML のソース <dl> <dt>見出し</dt> <dd>内容</dd> </dl> CSS のソース dl { display: table; width: 360px; border: 2px solid #ccc; } dt, dd { display: table-cell; padding: 0.5em 1em; vertical-align: middle; } dt { width: 20%; background-color: #
![[ CSS ] display: table-cell って便利そう!](https://cdn-ak-scissors.b.st-hatena.com/image/square/dcabe16bc58435f59db02fbd93af46344d34c3ef/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2017%2F02%2Fcss_1487924736.jpg)