ラベル CSS の投稿を表示しています。 すべての投稿を表示
ラベル CSS の投稿を表示しています。 すべての投稿を表示

2017年7月28日金曜日

HTMLのtdタグにてmin-heightを設定しつつvertical-align: middle;を適用させる方法

やり方


  1. td内に見えないimgタグを配置する
  2. imgのcssにvertical-align: middle;を適用する
  3. コンテンツをdivタグまたはspanタグで囲ってdisplay: inline-block;とvertical-align: middle;を適用する

サンプルコード


<table style="width: 200px; background-color: azure;">
  <tbody>
    <tr>
      <td>
        <img style="min-height: 100px; vertical-align: middle; width: 0; border: none; padding: 0;" />
        <span style="display: inline-block; vertical-align: middle; background-color: aquamarine;">あかまきがみ、あおまきがみ、きまきがみ</span>
      </td>
    </tr>
  </tbody>
</table>

適用結果

あかまきがみ、あおまきがみ、きまきがみ


このエントリーをはてなブックマークに追加