表格单元格与图像和文本对齐答案

【问题标题】：table cell alignment with image and text表格单元格与图像和文本对齐
【发布时间】：2019-04-24 22:50:44
【问题描述】：

<table style="width:100%">
 <tr>
  <th>type</th>
  <th>descritpion</th> 
 </tr>
<tr>
 <td><p><img src="mail.ping" style="width: 30px;"></p>
  <span>type-cedit ad=nd debit and shopping</td>
 <td>description</td>
  </tr>
</table>

上图是显示表数据。当图像和文本在表格单元格内对齐时。当文本较小时，这可以正常工作。但是当文本大小很大时。文字出现在图片下方。

在上图中，如果长度很大，我需要让“购物”工作在“类型”下方。文字不应出现在图像下方。我该如何解决这个对齐问题

【问题讨论】：

td {padding;left: 图像宽度} td img {margin-left: -??px 图像宽度}
请添加html代码
@HirenVaghasiya 你能检查上面的代码吗..

标签： html css html-table alignment

【解决方案1】：

应用display:inline-block 或float:left 可以同时对齐

.divin{
display:inline-block;}

<table style="width:100%">
 <tr>
  <th>type</th>
  <th>descritpion</th> 
 </tr>
<tr>
 <td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
 <span class="divin">type-cedit ad=nd debit and shopping</span></td>
 <td>description</td>
  </tr>
</table>

【讨论】：