やり方
- td内に見えないimgタグを配置する
- imgのcssにvertical-align: middle;を適用する
- コンテンツを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>
<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>
適用結果
あかまきがみ、あおまきがみ、きまきがみ |