2016年9月2日金曜日

[MDL] テーブルのセルにアイコンを表示する

イメージ

Google が提唱するマテリアル デザインの開発キット、Material Design Lite (以下、MDL) の Tips です。

今回は、テーブルのセルにアイコンを表示するサンプル コードを紹介します。

環境

  • MDL バージョン: 1.2.0
  • 動作確認ブラウザ (すべて Windows 10):
    • Chrome 53
    • Microsoft Edge
    • Internet Explorer 11

ライブ デモ (サンプル コード)


解説

単純に <i> タグを記述するだけだと、以下の図のようにアイコンとテキストがずれて表示されてしまいます。

図1

このずれは、<i> タグのスタイルに vertical-align: middle; を指定すると、解消されます。本サンプル コードでは、 加えて、スタイルに margin-right: 4px; を指定して、アイコンとテキストの間隔を調整しています。

参考

0 件のコメント:

コメントを投稿